首页 > 分享 > 开发百度地图路径移动

开发百度地图路径移动

开发百度地图路径移动

最新推荐文章于 2024-09-29 08:38:20 发布

New Learning 于 2018-12-28 14:24:57 发布

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的AK"></script>

<title>百度地图利用DrivingRoute做轨迹回放</title>

</head>

<body>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

    var map = new BMap.Map("allmap");  // 创建Map实例

map.centerAndZoom("哈尔滨",15);      // 初始化地图,用城市名设置地图中心点

map.setMapStyle({ //可以自己定义地图底图 http://developer.baidu.com/map/custom/

styleJson:[

          {

"featureType": "water",

"elementType": "all",

"stylers": {

"color": "#72b8fe"

                    }

          },

          {

"featureType": "road",

"elementType": "geometry.fill",

"stylers": {

"color": "#ffffff"

                    }

          },

          {

"featureType": "road",

"elementType": "geometry.stroke",

"stylers": {

"color": "#bababa"

                    }

          },

          {

"featureType": "road",

"elementType": "labels.text.fill",

"stylers": {

"color": "#767676"

                    }

          },

          {

"featureType": "road",

"elementType": "labels.text.stroke",

"stylers": {

"color": "#ffffff"

                    }

          },

          {

"featureType": "land",

"elementType": "all",

"stylers": {

"color": "#b8cb93"

                    }

          }

]

    });

    map.addControl(new BMap.NavigationControl());        

    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));

    map.enableScrollWheelZoom(true);

var pts = [ 

   new BMap.Point(126.618398,45.721217), 

   new BMap.Point(126.62081,45.713008), 

   new BMap.Point(126.654694,45.732086), 

   new BMap.Point(126.675481,45.738471) 

];

   var polyline ;

   var options = {

onSearchComplete: function(results){

if (driving.getStatus() == BMAP_STATUS_SUCCESS){

// 获取第一条方案

var plan = results.getPlan(0);

// 获取方案的驾车线路

var route = plan.getRoute(0);

//返回路线的地理坐标点数组。(自 1.2 新增)

var points = route.getPath();

polyline = new BMap.Polyline(points);

//alert(points.length);

map.addOverlay(polyline);          //增加折线

}

}

//,

//renderOptions:{map: map, autoViewport: true}

};

   var driving = new BMap.DrivingRoute(map, options);

i=0;

function playLine(i){

if(i==0){//第一个点 直接添加

var marker = new BMap.Marker(pts[i]);  // 创建标注

map.addOverlay(marker); 

marker.setLabel(new BMap.Label("我是第"+(i+1)+"个点",{offset:new BMap.Size(20,-10)}));

map.panTo(pts[i]);

i++;

setTimeout(function(){

playLine(i);

},2000)

}else{//获取PolyLine并添加 添加点

if(i<=pts.length){

driving.search(pts[i-1], pts[i]); 

map.addOverlay(polyline);

var marker = new BMap.Marker(pts[i]);  // 创建标注

    map.addOverlay(marker);

marker.setLabel(new BMap.Label("我是第"+(i+1)+"个点",{offset:new BMap.Size(20,-10)}));

map.panTo(pts[i]);

i++;

setTimeout(function(){

playLine(i);

},2000)

}

}

}

    playLine(i);

</script>

相关知识

手机百度地图怎么查看污染检测?
百度地图个性化定制新版和旧版
微信小程序之植物识别demo(百度开发接口)
移动设备签到应用开发大家给点开发
HTML5移动开发
探秘移动开发新灵感:利用“仿闲鱼发布页”资源快速提升技能
车威专访吉利汽车研究院副院长沈子瑜:我们做的不是产品 是生态
同城配送APP:同城订蛋糕送鲜花APP开发,有现成软件直接用
华为花瓣地图(Petal地图)上线,15亿次下载,亮点在这里
电商平台移动端应用开发及维护服务合同.doc

网址: 开发百度地图路径移动 https://m.huajiangbk.com/newsview546568.html

所属分类:花卉
上一篇: 掌上生词本 开发 (一): 顶部
下一篇: SpringBoot MySql