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

最新推荐文章于 2024-11-04 18:13:17 发布

码农挚友

最新推荐文章于 2024-11-04 18:13:17 发布

阅读量1.2k

点赞数

分类专栏：访问腾讯地图服务 PHP

本文链接：https://blog.youkuaiyun.com/weixin_42012939/article/details/109574594

版权

PHP 同时被 2 个专栏收录

29 篇文章

订阅专栏

访问腾讯地图服务

2 篇文章

订阅专栏

本文介绍如何在H5应用中集成腾讯地图服务，通过iframe嵌入地图选点组件并实现位置信息的回调功能。首先需访问腾讯地图官网申请Key，然后使用指定参数将地图组件嵌入到网页中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>