在微信小程序中加载百度地图

卓伙

已于 2024-04-11 21:42:48 修改

阅读量579

点赞数 10

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

于 2024-04-05 22:55:10 首次发布

本文链接：https://blog.csdn.net/whbke/article/details/137348652

版权

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

6 篇文章 0 订阅

订阅专栏

地图插件：卓伙地图组件

示例地址：小程序pages/bdmap

百度地图相关的插件文件地址：

1、proj4.js

2、proj4leaflet.js

3、tileLayer.baidu.js

一、申请卓伙地图插件

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

二、声明插件

app.json

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

三、在page内引入插件

pages/bdmap/bdmap.json

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

pages/bdmap/bdmap.wxml

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

pages/bdmap/bdmap.js

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

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const container = this.selectComponent('#bd-leafletwx')
    container.initLeafletMap(function(L) {
      wx.leaflet ??= {}
      wx.leaflet.L = L;
      require('./tileLayer.baidu')
      var map = L.map(container, {
        crs: L.CRS.Baidu,
        minZoom: 3,
        maxZoom: 18,
        zoom: 18
      });
      L.tileLayer.baidu({ layer: 'vec' }).addTo(map),
      map.setView([31.300635, 120.632314]);
      
      var geojsonFeature = [
        {
          "type": "Feature",
          "properties": {
              "name": "Coors Field",
          },
          "geometry": {
              "type": "Point",
              "coordinates": [120.632314, 31.300635]
          }
        },
        {
          "type": "Feature",
          "properties": {
              "name": "LineString Field",
              "color": "red"
          },
          "geometry": {
              "type": "LineString",
              "coordinates": [[120.631591,31.301028], [120.63178,31.301032]]
          }
        },
        {
          "type": "Feature",
          "properties": {
              "name": "Polygon Field",
              "color": "blue"
          },
          "geometry": {
              "type": "Polygon",
              "coordinates": [[[120.632207,31.301101], [120.632719,31.301066],[120.632741,31.300916],[120.632278,31.300958],[120.632207,31.301101]]]
          }
        },
        {
          "type": "Feature",
          "properties": {
              "name": "MultiPoint Field",
          },
          "geometry": {
              "type": "MultiPoint",
              "coordinates": [[120.632207,31.301101], [120.632719,31.301066],[120.632741,31.300916],[120.632278,31.300958]]
          }
        }
      ];
      
      var gj = L.geoJSON(geojsonFeature, 
        {
          src: 'https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
          style: (feature) => {
            return {
              color: feature.properties.color,
            }
          },
          onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.name);
          }
        }).addTo(map)
      
      // 删除geojson图层
      // map.removeLayer( gj );
    });

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

四、百度地图加载结果