腾讯地图的使用

Posted 2023-05-13

参考技术A 1.ak名,ak

我的-android

UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD

2.public/index.html

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD"></script>

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

3.使用的页面：

<template>

  <div>

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

    <div>

      经：

      <input type="text" ref="j" />

    </div>

    <div>

      纬：

      <input type="text" ref="w" />

    </div>

    <div>

      缩放级别：

      <input type="text" ref="z" />

    </div>

  </div>

</template>

script:

mounted()

  var qq = window.qq;

    var _this = this;

    var map = new qq.maps.Map(document.getElementById("container"),

      center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814), // 地图的中心地理坐标

      zoom: 18, // 地图缩放级别

      mapStyleId: "style1" // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗

    );

    var geolocation = new qq.maps.Geolocation(

      "UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名

      "我的-android"

    );

    geolocation.getLocation(showPosition, () =>

      console.log("获取位置失败，如果是PC，请设置模拟器，Sensors,more tools>more");

    );

    function showPosition(position) //成功后的回调

      console.log(position);

      var lnglat = new qq.maps.LatLng(position.lat, position.lng);

      map.setCenter(lnglat); //成功后根据经纬度设置中心点

      map.setZoom(10); //设置缩放级别

      var marker = new qq.maps.Marker(

        //设置Marker的位置坐标

        position: lnglat,

        //设置显示Marker的地图

        map: map

      );

      //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false

      marker.setDraggable(true);

      //设置Marker停止拖动事件

      qq.maps.event.addListener(marker, "dragend", function()

        var position = marker.getPosition();

        var zoom = map.getZoom();

        console.log(position, zoom);

        _this.$refs.j.value = position.lng; //分别把拖动后显示的位置赋值给经纬度，缩放级别

        _this.$refs.w.value = position.lat;

        _this.$refs.z.value = zoom;

        //https://lbs.qq.com/javascript_v2/doc/geocoder.html

        //地址和经纬度之间进行转换服务

        var geocoder = new qq.maps.Geocoder();

        //对指定经纬度进行解析

        geocoder.getAddress(position);

        //设置服务请求成功的回调函数

        geocoder.setComplete(function(result)

          console.log(result.detail);      //拖动停止后返回的详细地址

        );

      );

   



----------------------------------------------------------------

//只获取定位的情况下：

  var qq = window.qq;

    var _this = this;

    var geolocation = new qq.maps.Geolocation(

      "UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名

      "我的-android"

    );

    geolocation.getLocation((position)=>

      _this.$refs.dw.innerHTML=position.city; //成功时赋值

    , () =>

      console.log("获取位置失败，如果是PC，请设置模拟器，Sensors,more tools>more");

    );

--------------------------------------------------------------------

<style scoped lang="scss">

#container

  min-width: 100%;

  min-height: 300px;



</style>

腾讯地图 热力图使用

采用腾讯地图的热力组件库，引入腾讯地图就不多赘述了，本篇主要讲如何使用
重点：热力高低只能通过相邻比较近的热力点的多少来控制，所以要想实现热力较高的区域，可以通过增加周围热力点的数量来实现

<div id="topMessageMap"></div>
// HTML代码 记得给宽高

//  
  const initTopMap = (window) => {
      let mapInit = reactive({})
      let mapQQ = reactive({})
      mapQQ = window.TMap  // 引入的腾讯地图
      const center = new (mapQQ as any).LatLng(lat.value, lng.value)
      const options = {
        zoom: zoomValue.value,
        // minZoom: 14,
        center: center,
        mapStyleId: \'style1\',
        mapTypeControl: false,
        zoomControl: false,
        scaleControl: false,
        panControl: false,
        showControl: false
      }
      mapInit = new (mapQQ as any).Map(document.getElementById(\'topMessageMap\'), options)
      const heat = new (mapQQ as any).visualization.Heat({
        max: 180, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 0, // 峰值高度
        // map: mapInit, // 必填参数，指定显示热力图的地图对象
        radius: 60 // 辐射半径，默认为20
      }).addTo(mapInit)
      console.log(heat)
      // 获取热力数据
      // const data = getHeatData(50, 50, 0)
      const data = topHeat()
      // 向热力图传入数据
      heat.setData(lukouList)
    }

// 数据格式
const lukouList = [{
        lng: 117.044054,
        lat: 39.068611,
        count: 10
}]