在vue中使用高德地图

文章地址：https://blog.csdn.net/weixin_43550562/article/details/127753291
文章地址：https://www.likecs.com/show-204471276.html
npm i @amap/amap-jsapi-loader --save

<template>
  <div class="drawStation">
    <div id="draw-station-container">
      <div class="input">
        <el-input v-model="location.lng" size="small" placeholder="经度" />
        <el-input v-model="location.lat" size="small" placeholder="纬度" />
        <el-input v-model="location.address" size="small" placeholder="搜索地址" />
      </div>
    </div>
  </div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
// window._AMapSecurityConfig = {
//   securityJsCode: '安全密钥'
// }
export default {
  name: 'DrawStation',
  data() {
    return {
      // 地图对象
      AMap: null,
      // 地图实例对象
      map: null,
      marker: null,
      // 经纬度
      location: {
        lat: '',
        lng: '',
        address: ''
      }
    }
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    /**
     * 创建地图
     */
    initMap() {
      AMapLoader.load({
        key: 'afae044d3e5f5e49b0e06421d2666b7c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap
          this.map = new AMap.Map('draw-station-container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [114.25335, 22.72724], // 初始化地图中心点位置
            mapStyle: 'amap://styles/normal' // 设置地图的显示样式
          })
 
          this.marker = new AMap.Marker({
            position: new AMap.LngLat(114.25335, 22.72724),
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 添加 Icon 图标 URL
            title: '深圳'
          })
          this.map.add(this.marker)
          // 移除已创建的 marker
          //   this.map.remove(marker)
 
          // 地图点击事件
          this.map.on('click', this.clickMapHandler)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 点击地图事件
    clickMapHandler(e) {
      this.location.lng = e.lnglat.getLng()
      this.location.lat = e.lnglat.getLat()
      this.map.remove(this.marker)
      AMapLoader.load({
        key: 'afae044d3e5f5e49b0e06421d2666b7c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 添加 Icon 图标 URL
          title: '深圳'
        })
        this.map.add(this.marker)
        // 移除已创建的 marker
        // this.map.remove(marker)
      })
    }
  }
}
</script>
 
<style scoped>
.drawStation #draw-station-container {
    padding: 0px;
    /* margin: 20px 0 20px 0; */
    margin: 20px auto;
    width: 100%;
    height: 800px;
}
 
.el-input {
    width: 150px;
    margin: 10px 0 0 10px;
    z-index: 5;
}
</style>