文档章节

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

liop
 liop
发布于 2017/08/31 14:43
字数 486
阅读 60
收藏 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>


 

© 著作权归作者所有

共有 人打赏支持
liop
粉丝 2
博文 66
码字总数 9821
作品 0
深圳
私信 提问
php编程之如何输入地址自动转换为经纬度

  对于一些地图或地理位置的显示,通常要用到经纬度来表示,也就是用户输入地址之后,系统能够根据用户输入的位置信息进行经纬度的转换,那么这在技术上该如何实现呢?下面就来为大家简单介...

燚轩科技
2018/04/25
0
0
超简单的热力地图教程来袭,各位小主快翻牌啊~

热力地图最近很受欢迎,超多人问,辣我们今天就来说说热力地图呀,满足陛下们~ 话说什么是热力地图? 热力地图,又称等值线地图(choropleth map),根据不同区域的位置(经纬度)数据,进行...

王小美
2017/05/25
0
0
android百度地图开发之自动定位所在位置与固定位置进行驾车,步行,公交路线搜索

最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车、公交、步行三种路径的搜索(公交路径运行没效果,待学习中),后来又学了定位功能,能够获取到自己所在位置...

happycodinggirl
2013/07/30
0
0
【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种。GPS定位,精度较高,可达到10米,但室内不可用,且超级费电。网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的...

酸奶小妹GIS
2014/07/10
0
0
【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种。GPS定位,精度较高,可达到10米,但室内不可用,且超级费电。网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的...

酸奶小妹GIS
2014/07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linux-tao
44分钟前
1
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
今天
9
0
OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
今天
100
6
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部