H5定位+腾讯地图逆地址解析 = 定位到区县

最新推荐文章于 2024-09-18 09:24:32 发布

ansheng02

最新推荐文章于 2024-09-18 09:24:32 发布

阅读量4.1k

点赞数

分类专栏： JS 前端相关手记文章标签： H5定位腾讯地图逆地址解析

本文链接：https://blog.csdn.net/ansheng02/article/details/87856674

版权

前端相关手记同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

最近搞定位真是搞得心累，从百度到腾讯，最后还是用了H5。

不得不夸一下我们的后台工作人员，真的是一个人搞定~不过我也学到了好多~

emmmmmmmmm……

说正题，H5定位得用手机来测，电脑浏览器切换成手机模式都不可以。

(请把“KRYKRYKRYKRYKRYKRY^^^^^”换成自己的腾讯key)

直接来源码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5定位</title>
	<style type="text/css">
		.map{
			width: 100%;
			height: 100%;
			background-color: #f00;
			color: #fff
		}
	</style>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KRYKRYKRYKRYKRYKRY^^^^^&libraries=geometry,convertor"></script>
	<script type="text/javascript">
		 //H5定位
        var lat,lng = null;
        var map,geocoder,center = null;
        getLocation();
        function getLocation(){
              //判断是否支持 获取本地位置
              if (navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showPosition);
              } else {
                x.innerHTML="浏览器不支持定位.";
              }
        }
        function showPosition(position){
            lat=position.coords.latitude; 
            lng=position.coords.longitude;
            //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度，2:搜狗经纬度，3:百度经纬度，4:mapbar经纬度，5:google经纬度，6:搜狗墨卡托
            qq.maps.convertor.translate(new qq.maps.LatLng(lat,lng), 1, function(res){
                //取出经纬度并且赋值
                center = res[0];
                map = new qq.maps.Map(document.getElementById("container"),{
                      center:  center,
                      zoom: 12
                  });
                //逆地址解析
                geocoder = new qq.maps.Geocoder({
                      complete : function(result){
                        let district = result.detail.addressComponents.district;   //定位到区县
                        alert(district);  //弹出当前区县、
                        document.getElementById("dwTxt").value = district;
                      }
                });
                geocoder.getAddress(center);
          })
        }
	</script>
</head>
<body>
	<div class="map">
		<input id="dwTxt" type="text">
	</div>
</body>
</html>