vue引用高德地图

一.在高德官网申请key

二.在public/index.html引入:

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key= 你的key"></script>

三.创建一个容器:

四.在methods引入:

<script>
var map,marker;
export default {
  name: "home",
  data() {
    return {
      arriveCoor:[114.321772,30.356818],//坐标点
      arrive:"",//位置信息
    };
  },
  methods:{
    mapDraw(arriveCoor){
      map = new AMap.Map('map-location', {   //map-location是嵌地图div的id
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom:16, //初始化地图层级
          center: arriveCoor, //初始化地图中心点
          // traffic:1
      });
      // 定位点
      this.addMarker(arriveCoor);
    },
    // 实例化点标记
    addMarker(arriveCoor) {
       var _this = this;
       marker = new AMap.Marker({
           icon: "",  //图片ip
           imageSize: "20px",
           position: arriveCoor,
           offset: new AMap.Pixel(-13, -30),
           // 设置是否可以拖拽
           draggable: true,
           cursor: 'move',
           // 设置拖拽效果
           raiseOnDrag: true
       });
       marker.setMap(map);
    },
    　  mapCoor(lnglatXY){
　　　　var _this = this;
　　　　AMap.service('AMap.Geocoder',function() {//回调函数
　　　　　　var geocoder = new AMap.Geocoder({});
　　　　　　geocoder.getAddress(lnglatXY, function (status, result) {
　　　　　　　　if (status === 'complete' && result.info === 'OK') {
　　　　　　　　　　//获得了有效的地址信息:
　　　　　　　　　　_this.arrive = result.regeocode.formattedAddress;}
　　　　　　　　else {
　　　　　　　　　　_this.arrive = "暂无位置";
　　　　　　　　}
　　　　　　});
　　　　})
　　},

  },
  mounted() {
        this.mapDraw(this.arriveCoor),
        this.mapCoor(this.arriveCoor)
  },
}
</script>