微信小程序_(map)简单的小地图
2023-09-14 08:57:05 时间
map地图效果 官方文档:传送门
Page({
data: {
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/resources/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
Gary 微信小程序 <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"> </map>
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
实现过程
添加map地图组件
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"> </map>
id:在控件点击事件回调会返回此id
markers标记点用于在地图上显示标记的位置
longitude :经度
latitude: 纬度
scale:缩放级别,取值范围为5-18
controls:控件名称
bindcontroltap: 点击控件时触发,会返回control的id
markers:标记点
bindmarkertap:点击标记点时触发,会返回marker的id
polyline:路线
bindregionchange: 视野发生变化时触发
show-location:显示带有方向的当前定位点
初始化地图路线、路线
data: {
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/resources/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
相关文章
- 使用 Java8的 stream对list数据去重,使用filter()过滤列表,list转map「建议收藏」
- 数组类型的字符串转List<Map>
- java中map转json[通俗易懂]
- java map转json字符_Map转JSON字符串
- 微信小程序官方组件展示之地图map源码
- C++map的遍历_Map集合循环遍历的几种方式
- js forEach和 map 区别
- Map的5种遍历方法
- 【Kotlin】集合操作 ⑤ ( Map 集合 | 获取 Map 值 | Map 遍历 | 可变 Map 集合 )
- Go语言sync.Map(在并发环境中使用的map)
- Redis实现快速存储Map(redis存map)
- 使用Redis轻松操作Map数据结构(redis操作map)
- 使用Redis存储Map结构数据(将map存到redis中)
- 警惕Redis Map的频繁变更(redis频繁修改map)
- 基于Redis集群的Map数据结构的删除(redis集群map删除)
- Oracle Map映射从实施到实现(oracle map映射)
- 使用Oracle Map方法开启新视野(oracle map方法)
- 科学上网如何使用Oracle MAP(oracle map使用)
- js实现的map方法示例代码