leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，目的是替换小程序内的原生map组件，项目开源地址：leatletwx。

 本示例开源地址在leafletwx的bdmap页面。

本示例使用的其他组件：

1.tileLayer.baidu.js来自开源项目leaflet-tileLayer-baidugaode，将引入leaflet改为引入leafletwx。

2.proj4.js、proj4leaflet.js

以上组件都可以在dbmap页面中获取到

pages/bdmap/bdmap.js

// pages/bdmap/bdmap.js
var L = require('../../components/zhgeo/leafletwx')
require('./tileLayer.baidu')
import {createMap} from '../../components/zhgeo/base.map'
import {DefaultIcons} from '../../components/zhgeo/config.js';
const defaultIcons = new DefaultIcons();
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const container = this.selectComponent('#bd-leafletwx')
    createMap(container, {
        crs: L.CRS.Baidu,
        minZoom: 3,
        maxZoom: 18,
        zoom: 18
      }, function(map) {
      L.tileLayer.baidu({ layer: 'vec' }).addTo(map),
      map.setView([31.300635, 120.632314]);
      
      // 添加marker
      let m = L.marker([31.300635, 120.632314], {
        src: defaultIcons.locationNow,
        width: 32,
        height: 32,
        showInCenter: false,
      }).addTo(map);
      // 删除marer
      // map.removeLayer( m );
    });
  },
})

pages/bdmap/bdmap.json

{
  "usingComponents": {
    "v-leaflet": "/components/zhgeo/zhgeo-component"
  }
}

pages/bdmap/bdmap.wxml

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

pages/bdmap/bdmap.wxss

/* pages/bdmap/bdmap.wxss */

地图展示：