栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

微信小程序 map地图使用

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

微信小程序 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
				})
			},
}

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/314257.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号