文档章节

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

liop
 liop
发布于 2017/08/31 14:43
字数 486
阅读 49
收藏 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
粉丝 1
博文 66
码字总数 9808
作品 0
深圳
私信 提问
php编程之如何输入地址自动转换为经纬度

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

燚轩科技
04/25
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
【高德地图API】如何解决坐标转换,坐标偏移?

一、坐标体系 首先我们要明白,开发者能接触到哪些坐标体系呢? 第一种分类: 1、 GPS,WGS-84,原始坐标体系。一般用国际标准的GPS记录仪记录下来的坐标,都是GPS的坐标。很可惜,在中国,任...

hejunbinlan
2015/08/07
0
0
android百度地图开发之自动定位所在位置与固定位置进行驾车,步行,公交路线搜索

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

happycodinggirl
2013/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
2
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
6
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
8
0
GPON网络故障处理手册

导读 为了方便广大网络工作者工作需要,特搜集以下GPON网络处理流程供大家学习参考。开始—初步定为故障—检查光纤状况—检查ONU状态--检查设备运行状态—检查设备数据配置—检查上层设备状态...

问题终结者
昨天
9
0
MariaDB、Apache安装

11月12日任务 11.6 MariaDB安装 11.7/11.8/11.9 Apache安装 1.MariaDB安装 cd /usr/local/src wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/......

hhpuppy
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部