百度地图添加多个marker点位标注

百度地图添加多个marker点位标注

新建一个TMap.js文件

export function TMap(key) {
  return new Promise(function (resolve, reject) {
      window.init = function () {
          resolve(qq)//注意这里
      }
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://map.qq.com/api/js?v=2.exp&callback=init&key="+key;
      script.onerror = reject;
      document.head.appendChild(script);
  })
}

<template>
  <div class="overview">
    <div class="container" ref="container" id="container"></div>
    <div class="search">
      <left-tree @onChangeCode="onChangeCode" />
    </div>
  </div>
</template>

<script>
import LeftTree from '@/components/myCascader/LeftTree'
import {TMap} from './TMap'

export default {
  components: { LeftTree },
  // 环监概览  OEGBZ-4GKWJ-RVKF6-FZ346-75NS5-N7FU7
  data() {
    return {
      key: 'OEGBZ-4GKWJ-RVKF6-FZ346-75NS5-N7FU7',
      longitude: 0, //经度
      latitude: 0, //纬度
      city: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._getLocation()
    })
  },
  methods: {
    _getLocation() {
      let arr = [
        { lat: 30.64242, lng: 104.04311 },
        { lat: 29.322832, lng: 104.777441 },
        { lat: 29.355467, lng: 104.774748 }
      ]
      this._TMap(arr)
    },
    _TMap(data) {
      TMap(this.key).then(qq => {
      //  latitude longitude
        var center = new qq.maps.LatLng(30.64242, 104.04311); // 当前中心位置
        var map = new qq.maps.Map(document.getElementById('container'), {
          // 地图的中心地理坐标
          center: center,
          //初始化地图缩放级别
          zoom: 13
        })
        //添加提示窗
        var infoWin = new qq.maps.InfoWindow({
          map: map
        })
        //添加标记
        for (let i = 0; i < data.length; i++) {
          var marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(data[i].lat, data[i].lng),
            map: map
          })
          marker.libraryName = '当前定位' + i
          qq.maps.event.addListener(marker, 'click', function() {
            infoWin.open()
            infoWin.setContent(
              '<div style="text-align:center;white-space:' + 'nowrap;margin:10px;"> ' + data[i].lat+ ' </div>'
            )
            //提示窗位置
            infoWin.setPosition(new qq.maps.LatLng(data[i].lat, data[i].lng))
          })
        }
      })
    },
    // 定位
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation('OEGBZ-4GKWJ-RVKF6-FZ346-75NS5-N7FU7', 'yourkey')
      // geolocation.getIpLocation(this.showPosition, this.showErr)
      geolocation.getLocation(this.showPosition, this.showErr) //或者用getLocation精确度比较高
    },
    showPosition(position) {
      console.log(position)
      this.latitude = position.lat
      this.longitude = position.lng
      this.city = position.city
    },


    onChangeCode(val) {
      console.log(val)
      let { lat, lng } = val
    }
  }
}
</script>

<style lang="less" scoped>
.overview {
  position: relative;
  .container {
    width: 100%;
    height: 100vh;
  }
  .search {
    position: absolute;
    z-index: 2;
    top: 50px;
    left: 80px;
    background: #fff;
    padding: 15px 25px 15px 15px;
  }
}
</style>

高德地图通过经纬度转地理位置名称

/**
     * 通过经纬度转地理位置
     */
    getPositionByLonLats(jd, wd) {
      const that = this;
      let lnglatXY = [jd, wd]; // 地图上所标点的坐标
      AMap.service("AMap.Geocoder", function () {
        // 回调函数
        let geocoder = new AMap.Geocoder({});
        geocoder.getAddress(lnglatXY, function (status, result) {
          let address = "";
          if (status === "complete" && result.info === "OK") {
            address = result.regeocode.formattedAddress;
            console.log(address);
          } else {
            address = "--";
          }
          // 设置maker标签（maker上方文字提示）
          that.oldPoint.setLabel({
            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
            content: address, //设置文本标注内容
            direction: "top", //设置文本标注方位
          });
        });
      });
    },