html5 计算步行数,高德地图API之步行路线

步行路线

引入插件 amap.walking

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search([

{keyword:"宁波大学",city:"宁波"},

{keyword:"汽车东站",city:"宁波"}

],function(status,data){

console.log(data);

});

输入起点和终点，点击按钮规划路线

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

起点

终点

开始导航

var map=new amap.map("container",{

zoom:11

});

// 给起点和终点添加自动补全功能

new amap.autocomplete({

input:"node1"

})

new amap.autocomplete({

input:"node2"

})

btn.οnclick=function(){

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search([

{keyword:node1.value,city:"宁波"},

{keyword:node2.value,city:"宁波"}

],function(status,data){

console.log(data);

});

}

通过经纬度来进行导航

实现鼠标点击两个地址，自动进行导航

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

var i=0,arr=[];

map.on("click",function(e){

i++;

console.log(i);

if(i%2==1){

arr=[e.lnglat.r,e.lnglat.q];

}else{

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.q),function(status,data){

console.log(data);

});

}

})

常规用法

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([121.549792,29.868388],[121.549792,29.468388],function(status,data){

console.log(data);

});

注意：如果是大于两个定位点，不能直接添加第三个，会报错

search中传的数组只能传2个

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([121.549792,29.868388],[121.549792,29.468388],[121.549792,29.368388],function(status,data){

console.log(data);

});

正确的多点规划做法：(在每个定位点外面用再用数组括号包起来)

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([[121.549792,29.868388],[121.549792,30.468388],[121.549792,31.368388]],function(status,data){

//console.log(data);

});

现在无效了，我估计因为版本迭代被取消了吧！！！