• 首先在index.html中加入如下引用

<!--引入高德地圖JSAPI -->
<script src="//webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>

<!--引入UI元件庫（1.0版本） -->

<script src="//webapi.amap.com/ui/1.0/main.js"></script>

• 新建一個map.vue元件

首先要在build/webpack.base.conf.js 加入如下配置， externals: { 'AMap': 'AMap' }

在script中引入如下元件，如果第二步不配置，這裡會報錯

import AMap from 'AMap'

var map,geolocation    mounted: function () {          this.init()        },<div class="m-map">            <div class="search" v-if="placeSearch">                <input type="text" placeholder="請輸入關鍵字" v-model="searchKey">                <button type="button" @click="handleSearch">搜尋</button>                <div id="js-result" v-show="searchKey" class="result"></div>            </div>            <div id="container"></div>        </div>        <div id="tip"></div>  data () {          return {            searchKey: '',            placeSearch: null,            dragStatus: false,            AMapUI: null,            AMap: null          }        },    watch: {            searchKey () {                if (this.searchKey === '') {                    this.placeSearch.clear()                }            }        },
  methods: {            // 搜尋            handleSearch () {                if (this.searchKey) {                    this.placeSearch.search(this.searchKey)                }            },            init: function () {                let MapCityName = '中國'                let AMapUI = this.AMapUI = window.AMapUI                let AMap = this.AMap = window.AMap                AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {                    var map = new AMap.Map('container', {                        zoom: 16,                        //center:[113.372649,22.514076],       //設定中心點                    })
                    //設定中心點                    ///map.setCenter([116.39,39.9]);
                    //獲取中心點                    //var now=map.getCenter()                    //console.log(now)

                    // 載入地圖搜尋外掛                    AMap.service('AMap.PlaceSearch', () => {                        this.placeSearch = new AMap.PlaceSearch({                            pageSize: 5,                            pageIndex: 1,                            citylimit: true,                            city: '',                            map: map,                            panel: 'js-result',                            autoFitView:true,                        })                    })
                    // 建立地圖拖拽                    let positionPicker = new PositionPicker({                        mode: 'dragMarker',       // 設定為拖拽地圖模式，可選'dragMap'、'dragMarker'，預設為'dragMap'                        map: map,                 // 依賴地圖物件                    })


                    // 拖拽完成傳送自定義 drag 事件                    positionPicker.on('success', positionResult => {                        // 過濾掉初始化地圖後的第一次預設拖放                        if (!this.dragStatus) {                            this.dragStatus = true                        } else {                            console.log(positionResult.position)                            this.$emit('drag', positionResult)                        }                    })
                    // 啟用工具條                    AMap.plugin(['AMap.ToolBar'], function () {                        map.addControl(new AMap.ToolBar({                            position: 'RB',                            locate:true,            //是否顯示定位按鈕，預設為false                            //autoPosition:true,      //自動定位到使用者所在地                        }))                    })
                    //定位瀏覽器的位置                    map.plugin('AMap.Geolocation', function() {                        geolocation = new AMap.Geolocation({                            enableHighAccuracy: true,//是否使用高精度定位，預設:true                            timeout: 10000,          //超過10秒後停止定位，預設：無窮大                            buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設定的停靠位置的偏移量，預設：Pixel(10, 20)                            zoomToAccuracy: true,      //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false                            buttonPosition:'RT'                        });                        map.addControl(geolocation);                        geolocation.getCurrentPosition();                        console.log(geolocation)                //geolocation裡放了街道等詳細資訊                        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位資訊                        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯資訊                        AMap.event.addListener(geolocation, 'listElementClick', onMarkerClick);                    });                    function onMarkerClick(e) {                        console.log(e)                    }
                    //解析定位結果                    function onComplete(data) {                        var str=['定位成功'];                        str.push('經度：' + data.position.getLng());                        str.push('緯度：' + data.position.getLat());                        if(data.accuracy){                             str.push('精度：' + data.accuracy + ' 米');                        }//如為IP精確定位結果則沒有精度資訊                        str.push('是否經過偏移：' + (data.isConverted ? '是' : '否'));                        document.getElementById('tip').innerHTML = str.join('<br>');                        positionPicker.start()         // 啟動拖放,把拖放的圖示放到地圖的中心                    }                    //解析定位錯誤資訊                    function onError(data) {                        console.log('定位失敗')                    }
                })            }        }