用uniapp开发的微信小程序，如何使用开源地图组件leafletwx |
您所在的位置：网站首页 › 如何用facebook登录微信 › 用uniapp开发的微信小程序，如何使用开源地图组件leafletwx |
用uniapp开发的微信小程序，如何使用开源地图组件leafletwx
|
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结果展示： 百度地图 |
【本文地址】
今日新闻 |
推荐新闻 |