h5(app),获取腾讯地图操作(访问腾讯地图服务)

h5(app),获取腾讯地图操作

访问腾讯地图服务 : http://lbs.qq.com/qqmap_wx_jssdk/index.html;申请自己的Key;

 <iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=MADBZ-WR53D-V6Y4M-P4RFT-5Z6S6-ZYFER&referer=myapp">

</iframe>
 <script>
    window.addEventListener('message', function(event) {
        // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
        var loc = event.data;
        var name=loc.cityname;
        if(name.length>0){
      $(document).ready(function(){
        $('#ditu').hide();
        $('#contain1').show();
              var str="";
               str='<div class="info-list-cell b-b"  id="xuanzhe" οnclick="Show1();" style="border-bottom:none;line-height: 25px; width: 95%;top: 18%;"> <img style="height:17px;width:19px;margin-left:-3px;" src="WAP_IMG/stact/picture/dizhi.png"/><text class="cell-tit"  >所在地区</text><text class="cell-tip" id="diqu" >'+name+'</text><text class="cell-more"></text></div>';     
               $('#xuanzhe').html(str);

             });

        }
        else{
          href='';
        }
     
    });
</script>
在使用uniapp开发H5页面并通过webview嵌入时,如果你想唤起腾讯地图的原生应用来提供更丰富的地图服务和功能,你可以通过使用URL Scheme的方式来实现这一功能。URL Scheme是一种协议,它允许应用之间进行通信。对于腾讯地图,你可以在webview中通过一个特定格式的URL来触发打开腾讯地图应用的操作。 具体实现步骤如下: 1. 构造一个符合腾讯地图URL Scheme格式的链接,该链接包含了需要打开的地图详情或者地理位置信息。 2. 在uniapp的webview中检测是否安装了腾讯地图应用,如果已安装,则通过程序打开应用;如果未安装,则可以引导用户去应用商店下载安装。 3. 使用JavaScript中的`window.location.href`或者页面上的链接来加载这个URL Scheme链接。 以下是一个简单的示例代码,展示了如何在页面上添加一个链接,并在点击时尝试唤起腾讯地图应用: ```html <template> <view> <button @click="openTencentMap">打开腾讯地图</button> </view> </template> <script> export default { methods: { openTencentMap() { // 检测腾讯地图应用是否已经安装 const mapScheme = 'tencentmap://'; // 这里是腾讯地图的Scheme const isInstalled = wx.canIUse('openBusinessView') || wx.canIUse('openBusinessView:appID'); if (isInstalled) { // 已安装,尝试打开腾讯地图应用 wx.openBusinessView({ businessId: '1217260805', // 腾讯地图appID,这个ID可能需要根据实际情况获取最新值 url: mapScheme + 'map?arti=北京故宫博物院', // 构造打开地图的URL Scheme,这里添加了要查看的地点 success(res) { console.log('唤起腾讯地图成功', res); }, fail(err) { console.log('唤起腾讯地图失败', err); // 如果失败则提示用户打开应用或者下载 wx.showToast({ title: '请安装腾讯地图并打开', icon: 'none', duration: 2000, }); } }); } else { // 未安装,提示用户下载 wx.showToast({ title: '请安装腾讯地图', icon: 'none', duration: 2000, }); } } } } </script> ``` 需要注意的是,上述代码中`businessId`值是一个示例,实际使用时需要替换成正确的腾讯地图appID,并且需要确保用户的设备上已经安装了腾讯地图应用才能成功唤起。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值