第一步 在index.html中引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GkzoZdcPeSPkftKXRhEDXzern5epmXqZ"></script>
第二步
<template>
<el-main id="outMain"></el-main>
</template>
第三步 根据传入的经度和纬度参数 创建实例 只有起点和终点的
mapFlush(send, rece) {
var map = new BMap.Map("outMain"); // 创建地图实例
var point = new BMap.Point(send.longitude, send.latitude); // 创建点坐标
// 创建圆形范围
var circle;
// 创建一个圆形,参数分别为:中心点、半径、选项
map.centerAndZoom(point, 15);
//根据起始点 以及终点的经纬度 生成 路线
var p1 = new BMap.Point(send.longitude, send.latitude);
var p2 = new BMap.Point(rece.longitude, rece.latitude);
var driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: true },
});
driving.search(p1, p2);
map.enableScrollWheelZoom(true); //鼠标滚轮放大缩小
var marker = new BMap.Marker(point); // 创建标记对象
map.addOverlay(marker); // 将标记添加到地图上
marker.addEventListener("click", function () {
if (circle) {
// 如果圆形存在,则移除它
map.removeOverlay(circle);
circle = null;
} else {
// 如果圆形不存在,则创建并添加它
circle = new BMap.Circle(point, 4000, {
strokeColor: "#ff0000",
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 0.1,
});
map.addOverlay(circle);
}
});
或者 存在途经点
mapFlush(send, rece) {
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(send.longitude, send.latitude); // 创建点坐标
map.centerAndZoom(point, 15);
var p1 = new BMap.Point(send.longitude, send.latitude); // 起点
var p2 = new BMap.Point(rece.longitude, rece.latitude); // 终点
var waypoint = new BMap.Point(112.85, 41.12); // 中途点经纬度
var driving = new BMap.DrivingRoute(map);
driving.search(p2, p1);
driving.search(p1, waypoint);
driving.setSearchCompleteCallback(function () {
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
});
var m1 = new BMap.Marker(p2); //创建3个marker
var m2 = new BMap.Marker(p1);
var m3 = new BMap.Marker(waypoint);
map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(m3);
var lab1 = new BMap.Label("起点", { position: p2 }); //创建3个label
var lab2 = new BMap.Label("途径点", { position: p1 });
var lab3 = new BMap.Label("终点", { position: waypoint });
map.addOverlay(lab1);
map.addOverlay(lab2);
map.addOverlay(lab3);
},