腾讯地图（2.选择地点获取经纬度和地址）

最新推荐文章于 2024-06-17 10:03:20 发布

weixin_33701294

最新推荐文章于 2024-06-17 10:03:20 发布

阅读量1.8k

点赞数

文章标签： javascript 前端 c# ViewUI

原文链接：https://my.oschina.net/u/3559695/blog/1526912

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">

</head>
<body>
<div id="container" style="width: 500px;height:200px;"></div>
<p class="ditu">点击查看地图</p>
</body>

   $(".ditu").on("click",function(){
       $("#mapPage").show();
   });

   //通过iframe内嵌调用，地图选点组件的页面会根据开发者设置的iframe宽高自适应。
//注：1、使用iframe调用时,为防止在大屏手机上字体过小，需在源码中加入meta信息，<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//2、开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候，由于存在跨域的问题，需要通过html5 postMessage的方式回传用户选择的位置信息，开发者需要在自己的页面中实现一个监听函数，例如：
   window.addEventListener('message', function(event) {

       // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
       var loc = event.data;
       if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
           alert(loc)
           alert(loc.latlng.lat)
           alert(loc.latlng.lng)
           alert(loc.cityname)
       }
   }, false);

   /* 获取地址和经纬度
   {
module:'locationPicker',
latlng: {
lat: 39.998766,
lng: 116.273938
},
poiaddress: "北京市海淀区新建宫门路19号",
poiname: "颐和园",
cityname: "北京市"
   */
}

</script>