文档章节

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

liop
 liop
发布于 2017/08/31 14:43
字数 486
阅读 45
收藏 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
博文 61
码字总数 8900
作品 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
说说在 Android 如何实现基于位置的服务(基于百度 API)

基于位置的服务简称 LBS(Location Based Service),它是利用无线电通讯网络或 GPS 定位方式来确定出移动设备所在的位置。 利用定位服务,可以开发出许多丰富多彩的功能。比如天气预报 APP,...

deniro
08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis开发规范

一、键值设计 1.1 key名设计 (1)【建议】: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video:1 (2)【建议】:简洁性 保证语义的前提下...

IT--小哥
9分钟前
0
0
crunch 練習

crunch 10 10 -t 09%%%%%%%% -o tw_mobile_number.lst

BaiyuanLab
24分钟前
0
0
Kafka技术资料总结(不断更新中)

1、Kafka实践:到底该不该把不同类型的消息放在同一个主题中 2、Kafka剖析系列: Kafka剖析(一):Kafka背景及架构介绍 Kafka设计解析(二):Kafka High Availability (上)...

九州暮云
今天
2
0
面向对象设计原则(OOP)

单一职责原则(Single responsibility principle)又称单一功能原则。它规定一个类应该只有一个发生变化的原因。 核心原则:低耦合,高内聚。 一个类,应该只有一个引起它变化的原因,也就是...

gackey
今天
4
0
C++ 锁

C++提供了两种常用的锁,std::lock_guard<Lockable &T>和std::unique_lock<Lockable &T>。通常使用场景下,这两个锁用法一致。即,在构造锁对象时上锁,在析构锁对象时解锁。使用户从上锁/解...

yepanl
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部