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>

　　

posted @ 2022-11-07 10:35  ℡北瞳少年、  阅读(114)  评论(0)    收藏  举报