vue引入高德地图

1、先去高德地图开放平台申请key： https://console.amap.com/dev/key/app

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

2、在根目录下的 index.html 引入高德地图 及 key

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='申请的key"></script>   

3、
如果是vue-cli2 版本，则：在 build —> webpack.base.conf.js，在module.exports中添加 externals: { “AMap”: “AMap” }

如果是vue-cli3版本，则： 在 vue.config.js 文件中修改webpack配置

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}

4、使用：
一、IP城市定位：

（1） 因为使用城市定位，所以在index.html中引入地图时，地址后面要拼接上 &plugin=AMap.CitySearch

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='申请的key&plugin=AMap.CitySearch"></script>   

（2）在页面中使用

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  created() { },
  mounted() {
    this.showCityInfo();
  },
  methods: {
    showCityInfo() {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],  
        zoom: 13
      });

      map.plugin(['AMap.Weather', 'AMap.Scale', 'AMap.ToolBar'], function () {
        map.addControl(new AMap.Scale());     // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.ToolBar());   // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件

        //创建天气查询实例
        conat weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive('武汉市', function (err, data) {
          console.log(err, data);
        });
      });

      let citysearch = new AMap.CitySearch();
      //  获取用户IP，返回当前城市
      citysearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.city && result.bounds) {
            let cityInfo = result.city;
            let cityBounds = result.bounds
            map.setBounds(cityBounds)
          }
        } else {
          alert(result.info)
        }
      })
    }
  }
}
</script>

二、通过地址定位

1、封装公用地图组件 BaseMap.vue

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

<script>
export default {
  prop: {
    mapPosition: ''
  },
  // 地理编码包含正向地理编码和逆向地理编码两种：
  // 正向地理编码： 将地址描述信息转换成地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法
  // 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息，对应为AMap.Geocoder的getAddress方法
  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('定位失败！');
          }
        });
      });
    }
  }
}

</script>
<style lang='less' scoped>
.map-container {
  width: 100%;
  height: 350px;
}
</style>

2、使用： 引入组件 + 触发组件BaseMap.vue中的markLocation方法定位

<template>
  <div style="width: 1000px; margin:50px auto">
    <p>
      <span>联系地址 :</span>
      <span>{{dataList.address}}</span>
    </p>

    <div style="width: 500px;height: 300px">
      <!-- <img src="@/assets/images/source/map.png" alt /> -->
      <base-map ref="mapDom"></base-map>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/apis/apis'
import BaseMap from '@/components/BaseMap'
export default {
  data() {
    return {
      dataList: {},
    };
  },
  components: { BaseMap },
  created() {
    this.getList();
  },
  methods: {
    // 地址信息
    getList() {
      getInfo({ data: { id: this.$route.query.id } }).then(res => {
        if (res.code === 0) {
          this.dataList = res.data;
          this.$nextTick(() => {
            this.$refs.mapDom.markLocation("container", this.dataList.address)
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
  }
}
</script>