uniapp微信小程序map地图使用polygon绘制多边形片区
polygon 指定一系列坐标点,根据 points 坐标数据生成闭合多边形
html
<map id="map" style="width: 100vw;height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers" :polygons="polygons" @tap="mapTap" @callouttap="onCallouttap"></map>
javascript
export default {
data() {
return {
polygons: [{
strokeWidth: 1,
strokeColor: '#000000',
fillColor: '#ffffff',
points: [
{
latitude: "23.08288402644847",
longitude: "113.30218549997039"
},
{
latitude: "23.085168159298544",
longitude: "113.33830101347007"
},
{
latitude: "23.046124888637255",
longitude: "113.34326689639329"
},
{
latitude: "23.04654030072217",
longitude: "113.28683640541976"
},
{
latitude: "23.081845770334308",
longitude: "113.28299913608771"
},
{
latitude: "23.083506975476055",
longitude: "113.30286266433609"
},
{
latitude: "23.08288402644847",
longitude: "113.30218549997039"
}
]
}],
latitude: 39.909,
longitude: 116.39742
}
},
methods: {
mapTap({
detail: {
latitude,
longitude
}
}) {
// 点击地图
console.log('latitude', latitude)
console.log('longitude', longitude)
},
onCallouttap({
detail: {
markerId
}
}) {
// 标记id
console.log('markerId', markerId)
}
},
computed: {
markers() {
// return ''
return [{
id: 1,
latitude: 23.063289012440045,
longitude: 113.31491751403087,
// 解除注释,使用完成透明图片可以隐藏标记的图标
// 完成透明图片icon
// iconPath: 'http://oss.eoway.cn/upload/files/2020-09-30-15-03-59-rn278.png',
// width: 50,
// height: 16,
label: {
content: '海珠片区',
color: '#00AE5D',
fontSize: 14,
textAlign: 'center'
}
}]
}
}
}
polygons 是一个数组,一个元素代表一个片区,设置多个片区设置多个元素。
上面示例中,使用markers标记了多边形的中心点,如需隐藏标记的图标,可以给markers标记设置透明的png图片。
在map组件上绑定@markertap
、@callouttap
点击标记时,返回标记的markerId,也就是id。
在map组件上绑定@tap
,点击地图时触发,返回点击位置信息,可以获取到点击位置的latitude和longitude。
polygon 多边形设置fillColor填充颜色透明度。
使用css颜色十六进制设置 polygon fillColor 背景色的透明度,strokeColor描边也可以设置透明度。
polygons: [{
strokeWidth: 1,
strokeColor: '#bbdfd1AD',
fillColor: '#bbdfd1AD'
points:[
// ...
]
}]
转载请注明来源:《 uniapp微信小程序map地图使用polygon绘制多边形片区》- rojerYong's Blog
文章链接:https://www.eoway.cn /article/1601452062.html如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。
--END--
推荐
- 微信小程序打包,主包和分包都小于2m,却上传失败
- 微信公众号网页,微信jssdk需要刷新页面才可以使用
- uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()
- uniapp 苹果授权登录
- uniapp app 跳转到微信小程序
- js常用方法
- css 变量
- uniapp 微信公众号网页 打开小程序
- 小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序
- uniapp解决原生组件层级过高覆盖页面组件的问题
- js判断是否ie浏览器、ie浏览器版本
- uniapp 设置 APP 首次打开时显示“用户协议和隐私政策”弹框
- uniapp,app端打开第三方应用(高德地图、百度地图、腾讯地图,apple地图进行导航)
- uniapp,ios打开apple地图显示自定义地点信息
- 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题
- web性能优化,使用preload和prefetch预加载资源