1.由于版本的不同
1》1.2之前的引用
<script src="http://api.map.baidu.com/api?key=你的key&v=1.0&services=false"></script>
2.0的版本引用
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的key" type="text/javascript"></script>
关键点：一个是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;j<plan.getNumRoutes();j++){
var 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<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>，就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<plan.getNumRoutes();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<pointArr.length; l+=3){
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;
}
}
}
},
