uni-app 腾讯地图选址

需求:在H5实现地图选点功能
在这里插入图片描述

步骤:1、官方文档有详细介绍 官方地址

2、个人操作步骤:

申请你的key 官方地址:官网地址
3通过webview嵌入组件,只支持新页面,不支持弹框形式

<web-view src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"></web-view>

监听点击位置信息的返回值

// #ifdef H5
window.addEventListener('message', event=> {
  // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
    var loc = event.data;
	if (loc && loc.module == 'locationPicker') {
        //防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
        console.log('location', loc);
	}
}, false);
// #endif
uni-app是一个基于Vue.js的跨平台应用开发框架,它允许开发者编写一套代码,生成兼容Android、iOS、Web等多端的应用。在使用uni-app集成腾讯地图时,你可以通过官方提供的`TencentMap`组件轻松添加标记点和轨迹。 对于标记点的按钮控制,你可以这样做: 1. 首先,在页面中导入`TencentMap.Marker`组件: ```html <view> <tencent-map :map="map" @ready="onMapReady"></tencent-map> </view> ``` 2. 定义一个用于放置标记点的方法,比如`addMarker`: ```javascript data() { return { map: {}, }; }, methods: { addMarker() { const marker = new TencentMap.Marker({ position: { latitude: 0, longitude: 0 }, // 标记位置 showInfoWindow: true, // 是否显示信息窗口,默认true iconUrl: 'marker.png', // 自定义图标路径 }); this.map.addMarker(marker); } } ``` 3. 在`onMapReady`事件中初始化地图并添加标记按钮: ```javascript methods: { onMapReady(e) { this.map = e.map; // 添加标记按钮 let button = uni.createSelectorQuery().select('#markerButton'); button.event('tap', () => { this.addMarker(); }).exec(); }, } ``` 4. 在模板中添加一个点击触发标记按钮的元素,例如: ```html <button id="markerButton">添加标记点</button> ``` 至于轨迹的控制,可以使用`TencentMap.Polyline`组件来创建轨迹线,并通过类似的方式控制显示和编辑。记得在需要的时候监听用户的操作事件,如`moveend`或`dragend`,动态更新轨迹。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值