腾讯地图逆地理编码小应用"/>
腾讯地图逆地理编码小应用
通过输入经纬度或者鼠标点击地图，获取该位置的地址信息，图标标注并自动弹窗，弹窗内容为地址信息。如下图
功能较为简单，代码里有注释。复制可以直接运行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图逆地理编码小应用</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{width:100%;height:100%;
}
*{margin:0px;padding:0px;
}
body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{width:603px;padding-top:3px;overflow:hidden;
}
.btn{width:142px;
}
#container{min-width:600px;min-height:767px;
}
</style>
<!-- 引入腾讯地图API,Key为申请的密钥 -->
<script charset="utf-8" src="=2.exp&key=RBCBZ-BYBLF-S2LJT-J7EX5-7WQHQ-LABY7"></script>
<script>var geocoder, map, codeLatLng, info ;
window.onload = function(){map = new qq.maps.Map(document.getElementById("container"), {center: new qq.maps.LatLng(19.26,110.39), // 地图的中心地理坐标。zoom:8 // 地图的缩放等级。});//覆盖物图标marker = new qq.maps.Marker({map:map})//弹窗info = new qq.maps.InfoWindow({map:map})//地理编码服务geocoder = new qq.maps.Geocoder()geocoder.setComplete(function(result){console.log(result)map.setCenter(result.detail.location)//设置地图中心点info.open() //打开弹窗info.setContent('<div style="width:280px;height:100px;">'+result.detail.address + '</div>') //弹窗大小和内容info.setPosition(result.detail.location) //弹窗位置marker.setPosition(result.detail.location) //图标位置marker.setVisible(true) //图标可见qq.maps.event.addListener(marker, 'click', function() { //点击图标显示该位置坐标alert("坐标地址为： " + result.detail.location)})})//输入经纬度获取codeLatLng = function() {var input = document.getElementById("latLng").value //获取输入框的值var latlngStr = input.split(",",2)var lat = parseFloat(latlngStr[0])var lng = parseFloat(latlngStr[1])var latLng = new qq.maps.LatLng(lat, lng) //通过经纬度转换为解析所需的坐标console.log(latLng)geocoder.getAddress(latLng) //逆地理编码获取地址}//鼠标点击获取qq.maps.event.addListener(map, 'click',function(event) { //监听鼠标点击事件var latLng = event.latLng //获取点击位置坐标console.log(latLng)geocoder.getAddress(latLng) //逆地理编码获取地址})
}
</script>
</head>
<body>
<div><input id = "latLng" type="textbox" value="20.0272,110.3193"><input type="button" value="search" onclick="codeLatLng()">
</div>
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>
更多推荐
腾讯地图逆地理编码小应用
发布评论