最终实现的效果图如下
用到的百度地图api有:设置新的图标，给多个点添加信息窗口，驾车线路规划，地名转换为坐标
功能虽然简单，但是在做的过程中遇到了许多坑。
1：第一步先实例化一个地图
<div
class="map_container"
id="container"
></div>
var map = new BMap.Map("container");
this.mapA = map;
// 创建地图实例
var point = new BMap.Point(118.014211, 27.75102);
// 创建点坐标
// map.enableScrollWheelZoom(true); //允许鼠标滚轮
map.centerAndZoom("陕西", 6); //初始化时的中心点
map.addControl(new BMap.NavigationControl()); //控件缩放
map.addControl(new BMap.ScaleControl()); //缩放控制
map.addControl(new BMap.OverviewMapControl()); //缩略图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.enableDragging(); //允许拖拽
2：创建地图标注，并添加到地图上，绑定点击事件
方法 返回值 描述
Point(lng: Number, lat: Number)
以指定的经度和纬度创建一个地理点坐标
Marker(point: Point, opts: MarkerOptions)
创建一个图像标注实例。point参数指定了图像标注所在的地理位置
addoverlay
{type, target}
当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
var pt = new BMap.Point(data_info[i][0]);
var marker = new BMap.Marker(
new BMap.Point(data_info[i][0], data_info[i][1]),
{ icon: myIcon }
); //
map.addOverlay(marker); //地图实例的事件
//绑定点击事件
addClickHandler(content, marker, _vue, address, map, lang, lt) {
marker.addEventListener("click", function(e) {
var icon = new BMap.Icon(
"/static/img/ic_address copy 18.png",
new BMap.Size(48, 63)
);
this.setIcon(icon);
//设置icon变色
_vue.openInfo(content, this, _vue, address, lang, lt);//打开信息框
});
},
3：打开信息框，输入起点后，进行线路规划
方法 返回值 描述
InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions)
创建一个信息窗实例，其中content支持HTML内容。1.2版本开始content参数支持传入DOM结点
openInfoWindow(infoWnd: InfoWindow) none 打开信息窗
DrivingRoute(location: Map | Point | String, opts: DrivingRouteOptions)
创建一个驾车导航实例，其中location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由地图当前的中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行
clearResults() none 清除本次线检索结果
openInfo(content, _this, _vue, end, lang, lt) {
// 传this,是因为2个函数内部的this指向不同
var point = new BMap.Point(lang, lt); //窗口所在点
var infoWindow = new BMap.InfoWindow(content, _vue.opts); // 创建信息窗口对象
_vue.mapA.openInfoWindow(infoWindow, point); //开启信息窗口
_vue.$nextTick(() => {
setTimeout(() => {
let mapBtn = document.querySelector(".mapBtn");
if (mapBtn) {
mapBtn.addEventListener("click", function() {
let start = document.querySelector(".start").value;//获取起点值
var driving = new BMap.DrivingRoute(_vue.mapA, {
renderOptions: {
map: _vue.mapA,
panel: "allmap-result",
autoViewport: true
},
policy: "BMAP_DRIVING_POLICY_LEAST_DISTANCE"
// 路线设置策略，最短距离
});
_vue.searchResult.push(driving);
let startPoint = "";
let endPoint = "";
var myGeo = new BMap.Geocoder();
myGeo.getPoint(start, point => {
if (point) {
startPoint = new BMap.Point(point.lng, point.lat); //起始点坐标
} else {
_vue.$message.error("请输入正确的位置");
}
endPoint = new BMap.Point(lang, lt); //结束点位置坐标
_vue.searchResult.forEach(v => {
if (v.aa != driving.aa) {
v.clearResults(); //清除上一次的路线,实例不一样
}
});
driving.search(startPoint, endPoint);
});
});
}
}, 20);
});
infoWindow.addEventListener("close", function(e) {
//监听信息框的关闭事件
if (!infoWindow.isOpen()) {
var icon = new BMap.Icon(
"/static/img/location.png",
new BMap.Size(48, 63)
);
_this.setIcon(icon);
}
});
},
其中遇到了几个问题：
搜索路线不出现的问题
通过文档发现v3.0中的驾车路线规划得是位置的经纬度，本人用位置测试不通过，通过转换为经纬度解决。
Geocoder() 创建一个地址解析器的实例
getPoint(address: String, callback: Function, city: String) none
对指定的地址进行解析。如果地址定位成功，则以地址所在的坐标点Point为参数调用回调函数。否则，回调函数的参数为null。city为地址所在的城市名，例如“北京市”
搜索一次后，再次搜索时，会出现路线重叠的问题，
通过 new BMap.DrivingRoute 实例的clearResults方法来清除，2次生成的实例是不同的，所以需要将上一次实例生成的路线清除。
_vue为vue实例
_vue.searchResult.forEach(v => {
if (v.aa != driving.aa) {//通过比对是否是之前的
v.clearResults(); //清除上一次的路线,实例不一样
}
});
let startPoint = "";
let endPoint = "";
var myGeo = new BMap.Geocoder();//创建地址解析器
myGeo.getPoint(start, point => {//获取坐标的经纬度
if (point) {
startPoint = new BMap.Point(point.lng, point.lat); //起始点坐标
} else {
_vue.$message.error("请输入正确的位置");
}
endPoint = new BMap.Point(lang, lt); //结束点位置坐标
_vue.searchResult.forEach(v => {
if (v.aa != driving.aa) {
v.clearResults(); //清除上一次的路线,实例不一样
}
});
driving.search(startPoint, endPoint);
});
源码放在github上面 https://github.com/akbq2008/baiduMap/blob/master/index.vue
如果讲的不清楚，可以看下百度地图的文档http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0
