腾讯地图定位及坐标解析

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:
<h1>腾讯地图测试</h1>
<div>您在当的位置(经度:<span id="now_lat"></span>,纬度:<span id="now_lng"></span>)<button type="button"
        onclick="geolocation.getLocation(showPosition, showErr, options)">获取当前位置</button></div>
        <div>您点击的位置(经度:<span id="poi_lat"></span>,纬度:<span id="poi_lng"></span>,解析出来的地址:<span id="poi_address"></span>)</div>
<div id="pos-area">

</div>

<script type="text/JavaScript">
var appkey ="A4KBZ-LUZE3-VPW3T-YGU5N-SIT2S-5ZFVH";

var geolocation = new qq.maps.Geolocation(appkey, "myapp");
var options = {timeout: 8000};

$(function(){

//加载完成后就取当前位置 
geolocation.getLocation(showPosition, showErr, options);

})

    function showPosition(position) {
        console.log(position);
        $('#now_lat').html(position.lat);
        $('#now_lng').html(position.lng);
        $('#poi_lat').html(position.lat);

$('#poi_lng').html(position.lng);

        //取出位置坐标了,设置地图显示出来
        var map = new qq.maps.Map(document.getElementById("pos-area"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(position.lat,position.lng),
            zoom:15
        });
        //添加标记
        var marker = new qq.maps.Marker({
            position:  new qq.maps.LatLng(position.lat,position.lng),
            map: map
        });
        //解析地址
        jiexiaddress(position.lat,position.lng);
        //绑定地图点击事件
        qq.maps.event.addListener(map, "click", function (e) {
            $('#poi_lat').html(e.latLng.getLat().toFixed(6));
            $('#poi_lng').html(e.latLng.getLng().toFixed(6));
            //先移除标记,再添加标记
            marker.setMap(null);
            marker = new qq.maps.Marker({
                position:  new qq.maps.LatLng(e.latLng.getLat(),e.latLng.getLng()),
                map: map
            });
           jiexiaddress(e.latLng.getLat(),e.latLng.getLng());
        });
    };

    function showErr() { 
        alert("定位失败!"); 
    };

//解析地址
function jiexiaddress(lat,lng){

var  url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key="+appkey+"&output=jsonp&&callback=?");
            $.getJSON(url3, function (result) {
                if(result.result!=undefined){
                    $('#poi_address').html(result.result.address);
                }else{
                    $('#poi_address').html('');
                }

            })

}


目录
相关文章
|
开发者
数据解析之Xpath解析(超详细定位)2
数据解析之Xpath解析(超详细定位)2
78 0
|
1月前
|
Web App开发 前端开发 测试技术
Selenium 4新特性解析:关联定位器及其他创新功能
【10月更文挑战第6天】Selenium 是一个强大的自动化测试工具,广泛用于Web应用程序的测试。随着Selenium 4的发布,它引入了许多新特性和改进,使得编写和维护自动化脚本变得更加容易。本文将深入探讨Selenium 4的一些关键新特性,特别是关联定位器(Relative Locators),以及其他一些重要的创新功能。
145 2
|
JavaScript 前端开发 API
python对接API二次开发高级实战案例解析:百度地图Web服务API封装函数(行政区划区域检索、地理编码、国内天气查询、IP定位、坐标转换)
python对接API二次开发高级实战案例解析:百度地图Web服务API封装函数(行政区划区域检索、地理编码、国内天气查询、IP定位、坐标转换)
443 0
|
4月前
|
存储 SQL Python
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
|
前端开发 JavaScript 算法
前端(七)——React框架的定位与应用场景解析
前端(七)——React框架的定位与应用场景解析
488 0
|
6月前
|
存储 缓存 监控
深入解析linux内存指标:快速定位系统内存问题的有效技巧与实用方法(free、top、ps、vmstat、cachestat、cachetop、sar、swap、动态内存、cgroops、oom)
深入解析linux内存指标:快速定位系统内存问题的有效技巧与实用方法(free、top、ps、vmstat、cachestat、cachetop、sar、swap、动态内存、cgroops、oom)
1244 0
|
6月前
|
算法 计算机视觉 芯片
[Halcon&定位] 二维仿射变换原理与算子解析
[Halcon&定位] 二维仿射变换原理与算子解析
331 0
|
XML 数据格式 开发者
数据解析之Xpath解析(超详细定位)1
数据解析之Xpath解析(超详细定位)1
255 0
|
安全 编译器 Go
读<一例 Go 编译器代码优化 bug 定位和修复解析>
读<一例 Go 编译器代码优化 bug 定位和修复解析>
104 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
208 1

推荐镜像

更多