vue使用高德地图显示坐标

index.html引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=847384cfd259b9042e88e96e851ae791"></script>

vue main.js引入

import AMap from 'vue-amap'; // 高德
//地图key
AMap.initAMapApiLoader({
  key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',//密钥
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
    'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'
  ],
  v: '1.4.15'
});
Vue.use(AMap);

<template>
	<div id="mapDiv"></div>
</template>
<script>
export default {
  data () {
    return {
      map: null
    };
  },

  created () { },

  mounted () {
    this.drawMap();
  },
  destroyed () {
    if (this.map != null) {
      this.map.destroy();
    }
  },

  methods: {
    drawMap () {
      AMap.plugin('AMap.PlaceSearch', () => {
        var placeSearch = new AMap.PlaceSearch(); //构造地点查询类
        placeSearch.search('地址', (status, result) => {
          if (result.info === 'OK') {
            var lat = result.poiList.pois[0].location.Q;
            var lng = result.poiList.pois[0].location.R;
            this.map = new AMap.Map('mapDiv', {
              resizeEnable: true,
              center: [lng, lat], //地图中心点
              zoom: 20 //地图显示的缩放级别
            });// 创建一个 Marker 实例：
            var marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat),   // 经纬度对象
              title: '北京',
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'
            });
            // 将创建的点标记添加到已有的地图实例：
            this.map.add(marker);
          }
        }); //关键字查询查询
      });
    }
  }
}
</script>