vue 调用高德地图实现简单操作

首先在官网申请密钥:https://lbs.amap.com申请密钥

1. 在index.html中引入:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=刚刚申请的密钥"></script>
2. webpack.base.conf.js修改:
externals: {'AMap': 'AMap','AMapUI': 'AMapUI'}
3.创建 BaseMap.vue

我这里对地图的要求较少,只需要展示即可,大家根据自己的需求添加不同的功能

<!-- 地图 -->
<template>
  <div class="map-container" id="container"></div>
</template>

<script>
export default {
  prop: {
    mapPosition: ''
  },
  data() {
    return {
    };
  },
  components: {},
  created() {
  },
  methods: {
    markLocation(mapId, address) {
      let that = this
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder();
        geocoder.getLocation(address, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 经纬度                      
            var lng = result.geocodes[0].location.lng;
            var lat = result.geocodes[0].location.lat;
            // 地图实例
            var map = new AMap.Map(mapId, {
              resizeEnable: true, // 允许缩放
              center: [lng, lat], // 设置地图的中心点
              zoom: 15        // 设置地图的缩放级别,0 - 20
            });

            // 添加标记
            var marker = new AMap.Marker({
              map: map,
              position: new AMap.LngLat(lng, lat),   // 经纬度
            });
          } else {
            console.log('定位失败!');
            that.$emit('input',false)
          }
        });
      });
    }
  }
}

</script>
<style lang='less' scoped>
.map-container {
  width: 100%;
  height: 300px;
}
</style>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页