apsx/html使用Vue开发百度地图(现在以驾车路线规划为例)
第一步：在<head></head>标签添加vue.js、以及<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你在百度申请的key"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搭乘车报备查询</title>
<script src="../vue-2.6.12.js"></script>
<link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
<link rel="stylesheet" href="../elementui-2.15.6/icon.css">
<script src="../elementui-2.15.6/elementui.js"></script>
<link rel="stylesheet" href="../css/CCBB/List.css">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你在百度申请的key"></script>
</head>
<body id="app">
<div id="allmap">
</body>
</html>
第二步：
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
detailData:{},
PointList:[
{lng: '108.256589', lat: '35.326589'},
{lng: '107.654589', lat: '39.568568'},
{lng: '104.658956', lat: '36.256589'}
]
},
mounted(){
this.drawMap();
},
methods: {
drawMap(){
this.$nextTick(() => {
let myMap;
// 创建地实例
myMap = new BMap.Map("allmap"); //在指定的容器内创建地图实例
myMap.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用。
myMap.centerAndZoom(new BMap.Point(108.983569, 34.285675), 13); // 可以随机的一个坐标点
myMap.clearOverlays(); // 清除地图上所有的覆盖物
// 创建2个点对象
let p1 = new BMap.Point(pointArr[0].lng, pointArr[0].lat); // 起点
let p2 = new BMap.Point(pointArr[pointArr.length - 1].lng, pointArr[pointArr.length - 1].lat); // 终点
// 创建驾车实例
let driving = new BMap.DrivingRoute(myMap);
driving.search(p1, p2); // 第一个驾车搜索
driving.setSearchCompleteCallback(function (res) {
let points = [];
this.PointList.map(item => {
points.push(new BMap.Point(item.lng, item.lat))
})
// let points = driving.getResults().getPlan(0).getRoute(0).getPath(); // 通过驾车实例，获得一系列点的数组
console.log('points=', points); // 路线坐标数组
let polyline = new BMap.Polyline(points, { strokeColor: "#4C82FF", strokeWeight: 5, strokeOpacity: 1 });
myMap.addOverlay(polyline); // 增加折线
// 重新设置起始点，终点图标和偏移
let icon1 = new BMap.Icon('../../Resources/image/ic_qidian.png', new BMap.Size(40, 42), { anchor: new BMap.Size(25, 40), });
let icon2 = new BMap.Icon('../../Resources/image/ic_zhongdian.png', new BMap.Size(40, 42), { anchor: new BMap.Size(25, 40), });
let mkr1 = new BMap.Marker(p1, { icon: icon1 });
let mkr2 = new BMap.Marker(p2, { icon: icon2 });
myMap.addOverlay(mkr1);
myMap.addOverlay(mkr2);
setTimeout(() => {
// 调整到最佳视野(整个驾车路线完整显示在地图上)
myMap.setViewport(pointArr);
}, 1000);
})
})
}
}
})
</script>
