腾讯地图(2.选择地点 获取经纬度和地址)
博客专区 > liop 的博客 > 博客详情
腾讯地图(2.选择地点 获取经纬度和地址)
liop 发表于3个月前
腾讯地图(2.选择地点 获取经纬度和地址)
  • 发表于 3个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

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

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="demo" />
    <meta name="author" content="diyijiajiao"/>
    <meta name="keywords" content="demo" />
    <!--禁止百度转码-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <!--兼容ie-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <!---
    *  移动端设置
    ================================================== -->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <title>腾讯地图demo</title>

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div id="container" style="width: 500px;height:200px;"></div>
<p class="ditu">点击查看地图</p>
</body>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<iframe id="mapPage" width="100%" height="300px" style="display: none;" frameborder=0
        src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
</iframe>

<script>

    $(".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>

</html>


 

共有 人打赏支持
粉丝 2
博文 20
码字总数 2685
×
liop
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: