微信小程序 map地图使用

 

 以下代码是主要的代码片段

data(){
  return{
      latitude:23.140962248,
      longitude:113.305301124,
      scale:12,
      markers:[     {id: '',
					latitude: 23.140962248,
					longitude: 113.305301124,
					iconPath: '../static/select-dw.png',//当前位置图标路径
					width: 25,
					height: 39,
					},
                    {
                    latitude: 23.129742,
					longitude: 113.26754,
					iconPath: '../static/mark.png',//客户图标路径
					width: 28,
					height: 28,
					label: {
						content: '詹俊俊',
						textAlign: 'center',
						fontSize: 12
					   }
                    }]  

  }

},
onReady() {
	this.mapCtx = wx.createMapContext('customerMap')
},
methods:{

    // 点击标记点
			markertap(e) {
				let { markerId } = e.detail;
				let item = this.markers.find(v => v.id === markerId);
				console.log('item', item)
				uni.openLocation({
					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					name: item.label.content,
					address: item.address,
					success: function() {
						console.log('success');
					}
				});
			},
    // 当地图加载完成后触发
			updatedmap() {
				this.mapUpdated = true;
				console.log('执行')
				this.includePoints(); //所有客户显示在视图内
			},
    // 让标记点在地图可视视野内
			includePoints() {
				const that = this
				const points = [{
					latitude: that.latitude,
					longitude: that.longitude
				}];
				this.markers.forEach(item => {
					const obi = {
						latitude: item.latitude,
						longitude: item.longitude
					}
					points.push(obi)
				})
				this.mapCtx.includePoints({
					padding: [80, 50, 80, 50],
					points
				})
			},
}