欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
科迅动态
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
模拟从南通永旺梦新城走到南通科讯教育的地图实现
模拟从南通永旺梦新城走到南通科讯教育的地图实现
浏览量:294
时间:2019/2/16
类别:技术交流

今天我们来做一款仿高德地图的效果,图的效果是从南通永旺梦新城到南通新亚大厦的科讯教育的路途实现

image.pngimage.png

下面放出代码

<!DOCTYPE html>

<html lang="zh">

 

<head>

<meta charset="UTF-8">

<title>JS高德地图驾车路线</title>

 

<style>

#container {

width: 1000px;

height: 600px;

}

</style>

<script>

// 扩大作用域

var map = null;

var timer = null;

var markerList = null;

var index = 0;

 

// 异步加载地图策略

var initMap = function() {

// 初始化地图

map = new AMap.Map("container", {

center: [120.863258, 32.022622],

zoom: 18,

viewMode: "3D",

pitch: 75

})

 

// 异步加载插件,此时不需要在JS文件后边引入对应的插件,因为现在是异步加载的。

AMap.plugin("AMap.Driving", function() {

// 实例化对象

var driving = new AMap.Driving({

// 驾车路线规划策略,LEAST_TIME为最快捷模式。

policy: AMap.DrivingPolicy.LEAST_FEE,

map: map

});

 

// 起始和结束坐标位置

var startLngLat = [120.96841, 31.929739];

var endLngLat = [120.863258, 32.022622];

 

// 开始规划

driving.search(startLngLat, endLngLat, function(status, result) {

console.log(status);

console.log(result);

if(result.info === "OK") {

console.log(result.routes[0].steps);

alert("全程大约:" + (parseFloat(result.routes[0].distance) / 1000) + "公里,确认3秒后开始模拟车辆行车轨迹。");

markerList = GetMarkers(result);

console.log(markerList);

// 3秒后开始模拟车辆行车轨迹

window.setTimeout('map.setZoom(16);timer = window.setInterval("AddMarkerToMap(markerList[index++])", 50);', 3000);

} else {

alert("对不起,系统出现了问题");

}

});

});

}

 

// 定时函数

var marker = null;

 

function AddMarkerToMap(markerObj) {

if(markerObj == undefined) {

// 清除定时函数

window.clearInterval(timer);

return false;

}

// 清除之前的maker

if(marker != null) {

map.remove(marker);

}

// 暂存

marker = markerObj;

// 设置地图中心为当前的marker坐标

map.setCenter(markerObj.getPosition());

// 添加maker

map.add(markerObj);

}

 

// 获取路线所有的markers对象

function GetMarkers(result) {

var markerList = [];

// 获取路线各个子路段对象

var steps = result.routes[0].steps;

console.log("规划路线子路段个数:" + steps.length);

for(i = 0; i < steps.length; i++) {

console.log(steps[i])

// 获取子路段的坐标集合

var stepPath = steps[i].path;

console.log("子路段坐标集合个数:" + stepPath.length);

for(j = 0; j < stepPath.length; j++) {

var lng = stepPath[j].lng;

var lat = stepPath[j].lat;

var marker = new AMap.Marker({

position: [lng, lat],

icon: "images/car2.png"

});

console.log(marker);

markerList.push(marker);

}

}

return markerList;

}

</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3ce518392b5361b83ad0abb560b4c3b1&callback=initMap"></script>

 

</head>

 

<body>

 

<div id="container"></div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>本案例是模拟从南通永旺梦新城走到南通科讯教育的地图实现</p>

</div>

</body>

 

</html>

这期就到这里了


77
互联网升职加薪,科迅教育为你加油!
视频教程
项目演示
学员专访
南京校区:南京市建邺区新城科技园聚广路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周六   08:30-21:30
扫码关注免费学习
科迅教育集团     苏ICP备15009282号     法律顾问:江苏瑞慈律师事务所     Copyright 2008-
关闭
领取学习视频资料
限前100名
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?