在微信小程序中加载高德地图

卓伙

已于 2024-04-11 21:43:02 修改

阅读量2.4k

点赞数 5

分类专栏：微信小程序文旅地图文章标签：微信小程序小程序 uni-app 前端

于 2024-04-05 23:05:12 首次发布

本文链接：https://blog.youkuaiyun.com/whbke/article/details/137411827

版权

微信小程序文旅地图专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在微信小程序中申请并使用卓伙地图插件，包括在`app.json`中声明插件，以及在页面中引入和初始化地图，展示了如何加载高德地图数据和处理地理信息点的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地图插件：卓伙地图组件

示例地址：pages/gdmap

一、申请卓伙地图插件

插件申请地址：卓伙地图组件

二、声明插件

app.json

  "plugins": {
    "zhgeo-plugin": {
      "version": "latest",
      "provider": "wx3fe0bd34d4615f50"
    }

三、在page内引入插件

pages/gdmap/gdmap.json

{
  "usingComponents": {
    "v-zhgeo": "plugin://zhgeo-plugin/zhgeo-component"
  }
}

pages/gdmap/gdmap.wxml

<!--pages/gdmap/gdmap.wxml-->
<view class="container">
    <v-zhgeo id="gd-leafletwx" />
</view>

pages/gdmap/gdmap.js

// pages/gdmap/gdmap.js
const plugin = requirePlugin('zhgeo-plugin')
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  showLocation() {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const container = this.selectComponent('#gd-leafletwx')
    let min_zoom = 10
    let max_zoom = 18
    container.initLeafletMap(function(L) {
      wx.leaflet ??= {}
      wx.leaflet.L = L;
      var map = L.map(container, {
        minZoom: min_zoom,
        maxZoom: max_zoom,
      });

      var geoJsonData = {
        "type": "FeatureCollection", 
        "features": [
          { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [120.625348,31.294888] } },
          { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [120.625675,31.294898] } },
          { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [120.625375,31.294636] } },
          { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [120.626067,31.294609] } },
          { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [120.627379,31.296556] } },
          { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [120.623645,31.293604] } },
          { "type": "Feature", "id":"7", "properties": { "address": "39"  }, "geometry": { "type": "Point", "coordinates": [120.626008,31.294435] } },
          { "type": "Feature", "id":"8", "properties": { "address": "40"  }, "geometry": { "type": "Point", "coordinates": [120.625680,31.294315] } }
        ]
      };
      L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: "1234" }).addTo(map)
      
      var markers = L.markerClusterGroup();
      
      var geoJsonLayer = L.geoJson(geoJsonData, {
        src: 'https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.address);
        }
      })
      markers.addLayer(geoJsonLayer);

      map.addLayer(markers);
      map.fitBounds(markers.getBounds());
      
      markers.on('clusterclick', function (a) {
        // a.layer is actually a cluster
        console.log('cluster ' + a.layer.getAllChildMarkers().length);
      });
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

四、高德地图加载结果