[Java教程]H5微信通过百度地图API实现导航方式二

0 2017-08-01 23:53:20

要有服务器才行哦

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

#allmap{position: fixed; height:100%; width: 100%; overflow: hidden;}

.actionMap{

padding: 5px 12px;

font-size: 13px;

width: auto;

display: inline-block;

margin: 0 5px;

border-radius: 5px;

background: #0275d8;

color: #fff;

text-decoration: none;

}

给多个点添加信息窗口

// 百度地图初始化

map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(121.232719,41.538947), 12);

//    我的位置

var myJingdu=null,myWeidu = null;

var geolocation = new BMap.Geolocation();

var gc = new BMap.Geocoder();

geolocation.getCurrentPosition(function(r){

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

myJingdu = r.point.lng;

myWeidu = r.point.lat;

//    alert('您的位置：'+r.point.lng+','+r.point.lat);

}

else {

alert('failed'+this.getStatus());

}

});

//地图上的控件

map.enableScrollWheelZoom(true);  //启用滚轮放大缩小

//地图、卫星、混合模式切换

map.addControl(new BMap.MapTypeControl({

mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]

}));

//向地图中添加缩放控件

var ctrlNav = new window.BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

type: BMAP_NAVIGATION_CONTROL_LARGE

});

map.addControl(ctrlNav);

//向地图中添加缩略图控件

var ctrlOve = new window.BMap.OverviewMapControl({

anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

isOpen: 1

});

map.addControl(ctrlOve);

var marker = null;

function mapAdd(data_info){

for(var i=0;i

var pt = new BMap.Point(data_info[i].point[0],data_info[i].point[1]);//获取坐标点

//            地图缩放等级及偏移

map.panTo(map.centerAndZoom(new BMap.Point(data_info[2].point[0],data_info[2].point[1]),11));

var myIcon = new BMap.Icon('markers.png', new BMap.Size(24,35));

marker = new BMap.Marker(pt,{ icon: myIcon });  // 创建标注

var content = '

' + data_info[i].tel + '' + data_info[i].address + '

公交驾车徒步

';

var shopTitle = ""+data_info[i].title+"";

map.addOverlay(marker);  // 将标注添加到地图中

addClickHandler(content,marker,shopTitle);

}

function addClickHandler(content,marker,shopTitle){

marker.addEventListener("click",function(e){

openInfo(content,e,shopTitle)}

);

}

function openInfo(content,e,shopTitle){

var p = e.target;

var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

var infoWindow = new BMap.InfoWindow(content,{width:200,height:160,title:shopTitle,enableMessage:true});  // 创建信息窗口对象

map.openInfoWindow(infoWindow,point); //开启信息窗口

}

}

function removeMarker(tag){

var allOverlay = map.getOverlays();

console.log(allOverlay);

for (var i = 0; i < allOverlay.length -1; i++){

if(allOverlay[i].getLabel().content == tag){

map.removeOverlay(allOverlay[i]);

return false;

}

}

}

$(function(){

$.ajax({

url:"ajax2.js",

beforeSend: function(){

$("#panel").show();

},success: function(data){

var dat = JSON.parse(data);

mapAdd(dat);

$("#panel").hide();

}

});

})

function actionTo(action,jingdu,weidu){

var p1 = new BMap.Point(myJingdu,myWeidu);

var p2 = new BMap.Point(jingdu,weidu);

if(action == "DrivingRoute"){

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});

driving.search(p1, p2);

driving.setSearchCompleteCallback(function(res){

if(res.getNumPlans() <= 0){

alert("未查询到路线");

}else{

map.clearOverlays();

}

});

}else if(action == "WalkingRoute"){

var walk = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});

walk.search(p1, p2);

walk.setSearchCompleteCallback(function(res){

if(res.getNumPlans() <= 0){

alert("未查询到路线");

}else{

map.clearOverlays();

}

});

}else{

var transit = new BMap.TransitRoute(map, {

renderOptions: {map: map}

});

transit.search(p1, p2);

transit.setSearchCompleteCallback(function(res){

if(res.getNumPlans() <= 0){

alert("未查询到路线");

}else{

map.clearOverlays();

}

});

}

}

[{"title":"义县公安局","address":"地址：辽宁省锦州市义县城关街道迎宾路石油机械厂对面","tel":"电话：暂无","site":"","sort":"1","point":["121.27026","41.529094"]},{"title":"义县公安局(义州镇派出所)","address":"地址：义州镇西北街","tel":"电话：(0416)7715110","site":"","sort":"1","point":["121.247043","41.549419"]},{"title":"义县公安局森林公安分局","address":"地址：振兴路45","tel":"电话：暂无","site":"","sort":"1","point":["121.256135","41.533711"]},{"title":"义县公安局西山分局","address":"地址：305国道附近","tel":"电话：(0416)7603555","site":"","sort":"1","point":["121.155055","41.527811"]}]

本文网址：http://www.shaoqun.com/a/318421.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

百度

0