vue 里面引入高德地圖

效果圖：

　　

　　實現：

　　　　一：引入 高德，web-sdk （兩種方式）

　　　　　1:在html 中引入(我用的這一種）

　　　　　　<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你申請的高德appKey&plugin=AMap.Walking"></script>

　　　　　2:安裝vue-amap

　　　　　　

　　　　　　　文檔地址：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install    按照文檔自己來把，這里不多說了；

　　　　二：調用 

　　　　　　

　　　　　　

　　　　　　定義一個地圖的展示區域叫 containner  里面那個panel 是展示規划路線用的，可自行看高德API了解下；

 

　　　　　　

　　　　上述就是實現代碼，可打開下面粘貼

　　　　　　

let map = new AMap.Map('container', {
                    center: [this.tableData[0].longitude, this.tableData[0].latitude],
                    resizeEnable: true,
                    zoom: 30
                });
                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                    map.addControl(new AMap.ToolBar())
                    map.addControl(new AMap.Scale())
                });
                //畫一個車的位置
                let marker = new AMap.Marker({
                    //icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    icon:require("../assets/che.png"),
                    position: [this.tableData[0].longitude, this.tableData[0].latitude],
                    width:"40px",
                    height:"40px",
                });
                marker.setMap(map); 
                //畫附近所有站點的位置
                console.log(res.data.data[1].longitude,res.data.data[1].latitude)
                for (var index = 0; index < res.data.data.length; index++) {
                    let marker = new AMap.Marker({
                        //icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
                        icon:require("../assets/p.png"),
                        position:[res.data.data[index].longitude,res.data.data[index].latitude],
                    });
                    marker.setMap(map); 
                }

　　　　還有個規划路線的部分：

var walking = new AMap.Walking({
                    map: map,
                    panel: "panel"
                });
                walking.search([this.tableData[0].longitude, this.tableData[0].latitude], [res.data.data[0].longitude,res.data.data[0].latitude]);