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

微信小程序原生组件项目开源地址：leatletwx。

使用uniapp调用示例开源地址：unileaflet。

说明：

1.最近有几个水友询问这个组件支不支持uniapp，我抽空试了下，发现是可以的，在这里分享下源码

2.本实例是使用uniapp调用leafletwx原生微信小程序组件，仅适用于微信小程序开发，组件部分并非使用uniapp开发

3.目前支持的地图功能演示都在QQ地图（/pages/qqmap）页面中

题外话：

1.现在很流行用uniapp开发微信小程序吗？

2.现在uniapp的跨平台能力咋样，坑多不多？

主要修改内容：

1.目录调整

• 本示例中leafletwx组件目录从“components”移动到“wxcomponents”，即uniapp使用微信小程序原生组件的默认目录
• 百度地图（/pages/bdmap）、QQ地图（/pages/qqmap）、手绘地图（/pages/mymap）依赖的js文件，移动到了"/static/lib"的对应目录中，js文件内引用leafletwx的目录做了响应更改

2.uniapp的pages.json，在pages[pageidx].sytle.usingComponents中引用leafletwx组件

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
			}
		},
		{
		    "path" : "pages/bdmap/bdmap",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false,           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
		    }
		},
		{
            "path" : "pages/gdmap/gdmap",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
            }
        },
		{
		    "path" : "pages/mymap/mymap",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false,           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
		    }
		},
		{
		    "path" : "pages/qqmap/qqmap",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false,           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
		    }
		},
		{
            "path" : "pages/tdmap/tdmap",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,           
				"usingComponents": {
					"v-leaflet": "/wxcomponents/zhgeo/zhgeo-component"
				}
            }
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

3.页面中leafletwx组件dom的获取方式

// 在原生微信小程序中的获取组件方式
const container = this.selectComponent('#gd-leafletwx')
// 在uniapp中获取组件的方式
const container = this.$refs.myleafletwx

结果展示：

• 百度地图

• 高德地图

• QQ地图

• 天地图

• 手绘地图