成品预览图
上代码:
js
Page({
data: {
longitude: '', //地图界面中心的经度
latitude: '', //地图界面中心的纬度
lable_num:0,
markers: [
//标志点的位置 留一个假数据结构给你们
// {
// id: 0,
// iconPath: "../../static/images/mall/zuixing-95.png",
// latitude: 24.336770948763558,
// longitude: 102.53906505304985,
// width: 28,
// height: 32
// }
],
polyline: [{
//连线点 第一个可以为默认的连线点
points: [
// {
// latitude:'24.1934',
// longitude:'102.92849'
// }, {
// latitude:'24.19713438716873',
// longitude:'102.9306447535289'
// }, {
// latitude:'24.19586005538885',
// longitude:'102.93735297268154'
// }
],
color:'#8AC349',
width:10,
zIndex: 1
}]
},
onLoad: function () {
var that = this;
wx.getLocation({
type: "wgs84",
success: function (res) {
var latitude = res.latitude;
var longitude = res.longitude;
console.log("当前位置的经纬度为:", res.latitude, res.longitude);
that.setData({
latitude: res.latitude,
longitude: res.longitude,
})
//获取到当前经纬度后 渲染第一个连线点=》也就是自己的位置
// 绘制连线
var points = [{
latitude:res.latitude,
longitude:res.longitude
}];
//使用concat()来把两个数组合拼起来
var points_s = points.concat(that.data.polyline[0].points);
// console.log(points_s);
that.setData({
'polyline[0].points':points_s
})
}
})
},
onReady: function () {
},
/**
* 地图放大缩小事件触发
* @param {*} e
*/
bindregionchange(e) {
console.log('=bindregiοnchange=', e)
},
/**
* 点击地图事件,有经纬度信息返回
* @param {*} e
*/
bindtapMap(e) {
let that=this;
console.log('=bindtapMap=', e)
console.log('lat'+e.detail.latitude)
console.log('long'+e.detail.longitude)
//绘制坐标点
var insert = [{
id: parseInt(that.data.lable_num)+1,
iconPath: "../../static/images/mall/zuixing-95.png",
latitude: e.detail.latitude,
longitude: e.detail.longitude,
width: 30,
height: 30
}];
//使用concat()来把两个数组合拼起来
var markers_s = insert.concat(that.data.markers);
that.setData({
markers:markers_s
})
// 绘制连线
var points = [{
latitude:e.detail.latitude,
longitude:e.detail.longitude
}];
//使用concat()来把两个数组合拼起来
var points_s = points.concat(that.data.polyline[0].points);
// console.log(points_s);
that.setData({
'polyline[0].points':points_s
})
//使用concat()来把两个数组合拼起来
// var points_ = points.concat(that.data.polyline.points);
// that.setData({
// 'polyline.points':points_
// })
//标点+1
that.setData({
lable_num:parseInt(that.data.lable_num)+1
})
}
})