vue使用高德地图

1.vue使用高德地图api

高德地图api官网：https://developer.amap.com/product/map#/

1.1配置

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap',// 高德地图配置
    },
  },
}

1.2引入

在 index.html 文件脚本引入

/*
*@key: 高德地图api注册的key
*/
<script src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
  <div id="app"></div>

1.3 使用

<div  id="container" class="map"></div>
<script>
  import AMap from 'AMap';
  methods: {
  createMap() {
      //创建地图
      var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [120.024039,35.818754] //初始化地图中心点
    });
    //添加标记
     var marker = new AMap.Marker({
            position: [120.024039,35.818754],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    },
},
created() {
  this.createMap();
}
</script>

1.4 效果

image.png