文档章节

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

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


 

© 著作权归作者所有

共有 人打赏支持
liop
粉丝 1
博文 56
码字总数 7560
作品 0
深圳
php编程之如何输入地址自动转换为经纬度

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

燚轩科技
04/25
0
0
【高德地图API】如何解决坐标转换,坐标偏移?

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

hejunbinlan
2015/08/07
0
0
超简单的热力地图教程来袭,各位小主快翻牌啊~

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

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

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

happycodinggirl
2013/07/30
0
0
BMap:WEB 服务API

ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScrip...

吞吞吐吐的
2017/11/07
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
一句话搞定webmap(一)——轻地图组件

摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而如今,要制作一张地图真是越来越容易了!竟然只需要一句话,就可以打点,导...

酸奶小妹GIS
2014/08/12
0
0
WP开发使用BingMaps地图服务

WP8使用BingMaps地图在 SOAP服务如何计算路径 首先需要用到3个服务 1、GeoCode服务-转换地址到地理的经纬度(WebServices地址:http://dev.virtualearth.net/webservices/v1/geocodeservice/g...

junwong
2012/06/14
443
1
【微信公众平台开发】之三:LBS的开发

1、相关资料 *基于SAE和百度LBS微信公众平台周边搜索的实现{Java} *当有道翻译遇到微信公众平台{有道翻译API、百度LBS} *百度地图车联网API文档(http://developer.baidu.com/map/index....

realsa
2014/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot Admin 2.0开箱体验

概述 在我之前的 《Spring Boot应用监控实战》 一文中,讲述了如何利用 Spring Boot Admin 1.5.X 版本来可视化地监控 Spring Boot 应用。说时迟,那时快,现在 Spring Boot Admin 都更新到 ...

CodeSheep
18分钟前
0
0
Python + Selenium + Chrome 使用代理 auth 的用户名密码授权

米扑代理,全球领导的代理品牌,专注代理行业近十年,提供开放、私密、独享代理,并可免费试用 米扑代理官网:https://proxy.mimvp.com 本文示例,是结合米扑代理的私密、独享、开放代理,专...

sunboy2050
今天
0
0
实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部