全国地图（腾讯）

全国地图（腾讯）

1、首先在js中

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

2、在组件中引入js

import { TMap } from "../../utils/atlas";

<div id="main_echarts" style="width: 500px; height: 400px"></div> // 要有宽高哦！

created() {
    TMap("ak(秘钥)在官网申请").then((qq) => {
      this.init();
    }),
      this.gitdataList();
    this.getCity();
  },

methods: {
    init() {
      let address = "";
      let that = this;
      var center = new qq.maps.LatLng(39.9484, 116.48548);// 经纬度
      var map = new qq.maps.Map(document.getElementById("main_echarts"), {
        center: center,
        zoom: 13,
        disableDefaultUI: true,
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map,
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map,
      }); //此处是点击地图后生成的地标名称
      var geocoder = new qq.maps.Geocoder({
        complete: function (res) {
          console.log(res);
          address = res.detail.nearPois[0].name; //这里是你点击之处根据经纬度返回的地点名称
        },
      });
      qq.maps.event.addListener(map, "click", function (event) {
        this.longiistude = eveisnt.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        geocoder.getAddress(lat);
        setTimeout(() => {
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
          ); //这里是标记之处的样式
          infoWin.setPosition(event.latLng);
        }, 200);
      });
    },
}  

　　

可以在https://lbs.qq.com/这个网站里申请