在项目中使用原生高德地图创建坐标点（可点击）

一、 

<!-- 在index.html中的body引用  或者在使用页面引用
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key= 
你的key &plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.DistrictSearch,Map3D"></script> -->
<!-- 地图 -->
<template>
  <div class="content">
    <div class="TheMap">
      <div
        id="container"
        class="mapPart"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: ''
    }
  },
  created () {

  },
  mounted () {
    this.$nextTick(() => {
      this.getPosition()
      // this.mapContent();
    })
  },
  methods: {
    // 地图
    mapContent (markers) {
      var map = new window.AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 12
      })

      map.clearMap() // 清除地图覆盖物

      // 添加marker点
      markers.forEach(function (marker) {
        // 创建点
        const nowmar = new window.AMap.Marker({
          map: map,
          icon: marker.icon,
          position: [marker.position[0], marker.position[1]],
          offset: new window.AMap.Pixel(-13, -30)
        })
        // 添加点击事件
        nowmar.on('click', function (ev) {
          const lat = ev.lnglat.lat
          const lng = ev.lnglat.lng
          map.setZoomAndCenter(8, [lng, lat])

          // 添加标注点
          //   var marker = new AMap.Marker({
          //     map: map,
          //     position: [116.205467, 39.907761]
          // });
        })
        // 创建文本
        nowmar.setLabel({
          offset: new window.AMap.Pixel(0, -60), // 设置文本标注偏移量
          content: marker.content, // 设置文本标注内容
          direction: 'center' // 设置文本标注方位
        })
      })
      map.setFitView()
    },
    getPosition () {
      const data = [
        {
          latitude: '32.4796',
          longitude: '117.165',
          regionId: 3792,
          simpleName: '水湖镇新时代文明实践所'
        },
        {
          latitude: '32.19291',
          longitude: '117.08734',
          regionId: 5458,
          simpleName: '杨庙镇新时代文明实践所'
        }
      ]
      const markers = []
      for (let i = 0; i < data.length; i++) {
        markers.push({
          // icon: require('../../assets/icon/positionIcon.png'),
          position: [data[i].longitude, data[i].latitude],
          content: `<div class="txtContent">${data[i].simpleName}</div>`
        })
        this.mapContent(markers)
      }
    }
  }
}
</script>

<style>
.txtContent {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #f8f8f8;
  text-align: center;
  overflow: hidden; /*超出的文本隐藏*/
}
.amap-marker-label {
  width: 153px;
  height: 57px;
  background: rgba(7, 13, 37, 0.76);
  box-shadow: 0px 3px 7px 0px rgba(7, 16, 98, 0.39);
  border-radius: 6px;
  border: 0px;
}
</style>
<style scoped lang="less">
/* @import url(); 引入css类 */
.content {
  width: 900px;
  background-color: #fff;
  border-radius: 8px;
  height: 500px;
  .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    padding: 44px 0;
    color: #188df1;
  }
}
.TheMap {
  width: 900px;
  height: 450px;
  margin: 0 auto;
  position: relative;
  .mapPart {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
</style>

二、

图片：

 

 

代码： 

<template>
  <div class="mapPratice">
    <!-- 地图 -->
    <div class="main">
      <div id="container"></div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2d6f52355c4d17024610a5d45243378d&plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.DistrictSearch,Map3D"></script>
<script>

export default {
  data () {
    return {
      pageData: [], // 加载的地图信息
      longitude: '',
      latitude: '',
      mapSet: { // 设置高德地图配置
        center: [],
        viewMode: '3D',
        labelzIndex: 50,
        pitch: 5,
        zoom: 6.5,
        resizeEnable: true
      },
    }
  },
  created () {
  },
  mounted () {
    this.getAllTip()
  },
  methods: {
    getAllTip () {
      const deptCount = { lat: 34.64931, lng: 115.14621, }
      this.longitude = deptCount.lng
      this.latitude = deptCount.lat
      this.mapSet.center[0] = deptCount.lng
      this.mapSet.center[1] = deptCount.lat
      const deptInfo = [
        {
          count: 14660,
          lat: 30.0707,
          lng: 118.598,
          regionName: "华阳镇",
        }, {
          count: 918,
          lat: 30.0707,
          lng: 118.598,
          regionName: "瀛洲镇"
        }, {
          count: 2705,
          lat: 30.0707,
          lng: 118.598,
          regionName: "临溪镇"
        }, {
          count: 2322,
          lat: 30.0707,
          lng: 118.598,
          regionName: "金沙镇"
        }, {
          count: 3448,
          lat: 30.0707,
          lng: 118.598,
          regionName: "板桥头乡"
        }
      ]
      this.pageData = deptInfo
      // 拿到数据后启动高德地图
      this.startMap()
    },

    // 启动高德地图入口函数
    startMap () {
      // 初始化高德地图
      var map = new AMap.Map('container', this.mapSet)
      // 加载行政区域图层
      this.divisionEvent(map)
      // 加载点坐标
      this.addDot(map)
    },

    // 加载行政区域图层
    divisionEvent (map) {
      var district = null
      var polygons = []
      function drawBounds () {
        // 加载行政区划插件
        if (!district) {
          // 实例化DistrictSearch
          var opts = {
            subdistrict: 0, // 获取边界不需要返回下级行政区
            extensions: 'all', // 返回行政区边界坐标组等具体信息
            level: 'district' // 查询行政级别为 市
          }
          district = new AMap.DistrictSearch(opts)
        }
        // 行政区查询
        // 行政级别 包括 city、district、country、province
        const administrationLevel = 'city';
        const adcode = '民权县'
        district.setLevel(administrationLevel)
        district.search(adcode, function (status, result) {
          map.remove(polygons)// 清除上次结果
          polygons = []
          var bounds = result.districtList[0].boundaries
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: '#80d8ff',
                strokeColor: '#0091ea'
              })
              polygons.push(polygon)
            }
          }
          map.add(polygons)
          map.setFitView(polygons)// 视口自适应
        })
      }
      drawBounds()
    },
    // 加载点坐标
    addDot (map) {
      // 创建一个中心 Icon
      var centerIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(40, 40),
        // 图标的取图地址

        image: require('../assets/imgs/centerBJ.png'),
        // 图标所用图片大小
        imageSize: new AMap.Size(40, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      })

      // 创建一个通用 Icon
      var commonIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(20, 20),
        // 图标的取图地址
        image: require('../assets/imgs/biaoji.png'),
        // 图标所用图片大小
        imageSize: new AMap.Size(20, 20),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      })

      // 以 icon URL 的形式创建一个途经点
      var centerMarker = new AMap.Marker({
        position: new AMap.LngLat(this.longitude, this.latitude),
        // 将一张图片的地址设置为 icon
        icon: centerIcon,
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      })

      const addMapDot = this._ergodicDot(this.pageData, commonIcon)
      addMapDot.push(centerMarker)
      // 将 markers 添加到地图
      map.add(addMapDot)
    },
    // this.addDot事件的私有函数，dotArray为this.pageData，commonIcon,为通用的icon图标，遍历动态获取的点，并创建对象以便在地图上渲染
    _ergodicDot (dotArray, commonIcon) {
      var iconArray = []
      for (var i = 0; i < dotArray.length; i++) {
        if (!dotArray[i].regionName) {
          continue
        }
        const thisMarker = new AMap.Marker({
          position: new AMap.LngLat(this.longitude + i * 0.05, this.latitude),
          icon: commonIcon,
          offset: new AMap.Pixel(-10, -10)
        })
        thisMarker.setLabel({
          offset: new AMap.Pixel(-10, -10), // 设置文本标注偏移量
          content: // 设置文本标注内容
            `
                      <div class="mkStyle">
                          <p class="title">${dotArray[i].regionName}</p>
                          <p class="mkNum">( ${dotArray[i].count}个 )</p>
                      </div>
                  `,
          direction: 'top' // 设置文本标注方位
        })
        iconArray.push(thisMarker)
      }
      return iconArray
    },
  }
}
</script>

<style lang="less">
.mapPratice {
  width: 800px;
  height: 530px;
  box-sizing: border-box;
  padding: 14px;
  .main {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    #container {
      width: 100%;
      height: 100%;
      .amap-marker-label {
        border: 0;
        background-color: transparent;
        .mkStyle {
          padding: 15px;
          background-color: rgba(2, 2, 51, 0.6);
          border-radius: 3px;
          color: #fff;
          .title {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 10px;
          }
          .mkNum {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>