地图插件:卓伙地图组件
示例地址:小程序pages/bdmap
百度地图相关的插件文件地址:
1、proj4.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() {
}
})
四、百度地图加载结果