在微信小程序地图中,自己标点,三个点以上连成面,方法里边有注释
wxml
<map id="map" style="width:100%;height:100%;" longitude="{{longitude}}" latitude="{{latitude}}" bindtap="bindMap" polygons="{{polygons}}" markers='{{markers}}'></map>
js
Page({
/**
* 页面的初始数据
*/
data: {
longitude: 0,
latitude: 0,
markers:[],
gonsArr:[],
polygons: [{
points: [],//给个空数组在页面刚开始渲染的时候会报错,但是不影响使用
fillColor: "#ffff00",
strokeColor: "#00B277",
strokeWidth: 2,
zIndex: 1
}],
},
//点击地图的时候
bindMap(e) {
let arr=this.data.gonsArr //不直接使用polygons[0].points是因为如果不够三个点会报错
let arr1=this.data.markers //点击地图添加一个标记点
let latitude=e.detail.latitude
let longitude=e.detail.longitude
arr.push({latitude,longitude})
arr1.push({
latitude,
longitude,
iconPath: "../../image/map.png",
id: latitude,
width: '63rpx',
height: '88rpx'
})
//判断如果标记的点数大于等于3就给polygons[0].points赋值,如果小于3只添加点并且给gonsArr push一下
if(arr.length>2){
this.data.polygons[0].points=arr
this.setData({
polygons:this.data.polygons,
markers:arr1,
gonsArr:arr
})
}else{
this.setData({
markers:arr1,
gonsArr:arr
})
}
},
//清除标记点和面
clearGon(){
let arr=this.data.polygons
arr[0].points=[]
this.setData({
polygons:arr,
markers:[],
gonsArr:[]
})
},
submitGon(){
console.log(123)
},
getPosition() {
var that = this;
// 获取当前定位的经纬度信息
wx.showLoading({
title: "定位中",
mask: true
})
wx.getLocation({
type: 'gcj02',
altitude: true, //高精度定位
//定位成功,更新定位结果
success: function (res) {
var latitudee = res.latitude
var longitudee = res.longitude
that.setData({
longitude: parseFloat(longitudee),
latitude: parseFloat(latitudee),
})
},
//定位失败回调
fail: function (res) {
},
complete: function () {
}
})
},
onLoad(options) {
this.getPosition()//获取当前经纬度
},
})
**
polygons[0].points给空数组会报这个错,暂时没有什么好的解决办法,如果有解决办法,欢迎交流!
**