不使用组件引入高德地图

• 首先在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('定位失败')
                    }

                })
            }
        }