百度地图的一些问题以及解决方式

1.由于版本的不同
　1》1.2之前的引用
　　
　　 2.0的版本引用 
　　
　　 关键点：一个是key---ak，services

   2》在使用自定义标注，得到bounds的最大最小的XY值，1.2--2.0

          maxX -- Ee， maxY -- De，minX -- Je，minY -- Ie

   3》 1.2版本的没有MapTypeControl()这个方法；不可以更高地图的样式

          2.0版本的可以使用这个方法。增加这个控件；

2.  使用百度地图api中的按路画线，出现每次画出的线都有绿色虚线的底线，发现原因是因为自己每次定义的walking都做了rederoption重新渲染，所以出现了底色

var walking2 = new BMap.WalkingRoute(this_.gpsMap, {
// renderOptions:{map: this_.gpsMap, autoViewport: false}, 导致出现绿色虚线和订单label消失的原因，因为这句表示重新渲染，把这句注释掉，因为蓝色部分已经定位到当前的地图实例
onSearchComplete: function(res) {
var plan = res.getPlan(0);
var arrPois =[];
for(var j=0;jvar route = plan.getRoute(j);
arrPois= arrPois.concat(route.getPath());
}
var p2=new BMap.Polyline(arrPois, { strokeColor: "red", strokeWeight: 3, strokeOpacity: 1 });
p2["id"]='tr2';
this_.gpsMap.addOverlay(p2);
},
//移除起点和终点的marker
onMarkersSet:function(pois){
this_.gpsMap.removeOverlay(pois[0].marker)
this_.gpsMap.removeOverlay(pois[1].marker)
}
});

 

3.使用地图的时候，会出现BMapLib未定义？

   引入js，就ok了

4. 使用vue时候，对百度地图进行一个处理，写一个Map.js,如果我们在地图中使用了BMapLib，那么还要引入bmaplib.js（例如热力图就需要这）。

　　Map.js
　　export function MP(ak,a) {
　　　　return new Promise(function (resolve, reject) {
　　　　window.init = function () {
　　　　resolve(BMap)
　　　　}
　　　　var script = document.createElement("script");
　　　　script.type = "text/javascript";
　　　　script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
　　　　script.flag="true";
　　　　script.onerror = reject;
　　　　document.head.appendChild(script);
　　　　})
　　}
在我们需要引入的页面写入Map.js
   　MP("zmAWIlHnn8qQ4qMKkBGtypeoZio5q86s").then(BMap => {
　　     this_.gpsMap = new BMap.Map("allMap", { enableMapClick: true });
　　});
创建一个bmaplib.js
 　　export function HMP() {
　　　　return new Promise(function (resolve, reject) {
　　　　window.initheat = function () {
　　　　　　resolve(BMapLib)
　　　}
　　　　var script = document.createElement("script");
　　　　script.type = "text/javascript";
　　　　script.src = "../../static/js/Heatmap_min.js?callback=initheat";
　　　　script.onerror = reject;
　　　　document.head.appendChild(script);
　　})
}
在需要页面引入bmaplib.js就要写
　　MP("zmAWIlHnn8qQ4qMKkBGtypeoZio5q86s").then(BMap => {
　　　　hat_.map = new BMap.Map("allMap", { enableMapClick: true });
　　　　that_.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
　　　　HMP().then(BMapLib => { })
　　})

 

5.怎么消除地图上的底图的图标的点击事件怎么关闭？

　　var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能

6.根据后台获取的数据，画出轨迹路线，并且要按照道路走

　　traceLine1:function(pointArr){ 
　　　　pointArr是后台获取的数据，点的集合，已经经过处理，
　　　　　　$.each(result, function(index, value) { result原始获取数据
　　　　　　　　var x = value["longitude"];
　　　　　　　　var y = value["latitude"];
　　　　　　　　var ggPoint = new BMap.Point(x, y);
　　　　　　　　pointArr.push(ggPoint);
　　　　　　　});

　　　　var this_=this, polyline;
　　　　var str = "";
　　　　if(pointArr.length){
　　　　　　var point1 = new BMap.Point(pointArr[0].lng, pointArr[0].lat);
　　　　　　var startMarker = new BMap.Icon("../../../../static/images/since.png", new BMap.Size(22, 27), {
　　　　　　　　offset: new BMap.Size(10, 25)
　　　　　　});
　　　　var marker = new BMap.Marker(point1, { icon: startMarker });
// 创建标注
　　　　marker["id"]="mkstart";
　　　　//this_.gpsMap.addOverlay(marker);
　　　　var point2 = new BMap.Point(pointArr[pointArr.length - 1].lng, pointArr[pointArr.length - 1].lat);
　　　　var endMarker = new BMap.Icon("../../../../static/images/TheFinal.png", new BMap.Size(22, 27), {
　　　　　　offset: new BMap.Size(10, 25)
　　　　});
　　　　var marker2 = new BMap.Marker(point2, { icon: endMarker });
　　　　marker2["id"]="mkend";
　　　　//var label2 = new BMap.Label("终点 | 总路程是：" + this_.routeLine + "公里", { offset: new BMap.Size(-5, -20) });
　　　　//this_.gpsMap.addOverlay(marker2);
　　}
//步行
　　if(pointArr){
　　　　var walking = new BMap.WalkingRoute(this_.gpsMap, {
　　　　onSearchComplete: function(res) {
　　　　　　var plan = res.getPlan(0);
　　　　　　var arrPois =[];
　　　　　　if(plan){
　　　　　　　　for(var j=0;j　　　　　　　　　　var route = plan.getRoute(j);
　　　　　　　　　　arrPois= arrPois.concat(route.getPath());
　　　　　　}
　　　　var p1=new BMap.Polyline(arrPois, { strokeColor: "black", strokeWeight: 2, strokeOpacity: 1});
　　　　p1["id"]="tr1";
　　　　this_.gpsMap.addOverlay(p1);
　　　　}
　　},

//移除起点和终点的marker
　　onMarkersSet:function(pois){
　　　　this_.gpsMap.removeOverlay(pois[0].marker)
　　　　this_.gpsMap.removeOverlay(pois[1].marker)
　　}});
　　for(var l=0;l　　　　var m=l+3;var n=l+1;
　　　　if(m>pointArr.length-1){
　　　　　　m=pointArr.length-1;
　　　　}
　　　　if(n>pointArr.length-1){
　　　　　　n=pointArr.length-1;
　　　　}
　　　　str+=(this_.gpsMap.getDistance(new BMap.Point(pointArr[l].lng, pointArr[l].lat), new BMap.Point(pointArr[n].lng, pointArr[n].lat))).toFixed(2) + ","
　　　　walking.search(new BMap.Point(pointArr[l].lng, pointArr[l].lat), new BMap.Point(pointArr[m].lng, pointArr[m].lat)); 
　　} 
　　if (!str) {
　　　　this_.routeLine = 0;
　　} else {
　　　　this_.routeLine = (eval(str.split(",").join("+").substr(0, str.length - 1)) / 1000).toFixed(2);
　　　　if (this_.orderTotal) {
　　　　　　this_.arverage = (this_.routeLine / this_.orderTotal).toFixed(2);
　　　　} else {
　　　　　　this_.arverage = this_.routeLine;
　　　　}
　　} 
} 
},

转载于:https://www.cnblogs.com/fyjz/p/8425695.html