GoogleMapsV3-----基础地图(坐标地址转换)

最新推荐文章于 2025-05-13 10:26:58 发布

solicitous

最新推荐文章于 2025-05-13 10:26:58 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

分类专栏： googleMapV3 文章标签：坐标地址转换

本文链接：https://blog.youkuaiyun.com/solicitous/article/details/8536651

7 篇文章

订阅专栏

<html>

<head>

<style type="text/css">

html{height: 100%;}

body{height: 100%;margin: 0px;padding: 0px;}

#map_canvas{height: 80%;}

</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.9&sensor=false®ion=cn"> </script>

<script type="text/javascript">

var map = null;

//【初始化地图】

//============================================================================================

function initialize() {

//构建经纬度点

var latlng = new google.maps.LatLng(30.277925, 120.177597);

var myOptions ={

zoom: 8,

center: latlng,

mapTypeId: google.maps.MapTypeId.HYBRID

};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//点击地图的时候

google.maps.event.addListener(map, 'click', function (event) {

document.getElementById("lat_text").innerHTML=event.latLng.lat().toString();

document.getElementById("lng_text").innerHTML=event.latLng.lng().toString();

GetGoogleAddress(event.latLng);

});

//============================================================================================

//【根据经纬度查询地址】

//============================================================================================

function GetGoogleAddress(latlng) {

//用于在地址和 LatLng 之间进行转换的服务。

var geocoder = new google.maps.Geocoder();

//请求规范属性

//(address string 地址 可选)

//(bounds LatLngBounds 要在其中进行搜索的LatLngBounds 可选)

//(language string 用于显示结果的首选语言 可选)

//(location LatLng 要搜索的 LatLng 可选)

//(region string 要在其中进行搜索的国家/地区代码的顶级域名 可选)

var request = { 'location': latlng };

geocoder.geocode(request, function geoResults(results, status) {

//如果响应有效就显示

//google.maps.DirectionsStatus除了OK（响应包含有效的 GeocoderResponse）意外还有

//ERROR（连接 Google 服务器时出错）

//INVALID_REQUEST（GeocoderRequest 无效）

//OVER_QUERY_LIMIT（网页发出请求的频率过高，超过了最短时间限制）

//REQUEST_DENIED（不允许网页使用地址解析器）

//UNKNOWN_ERROR（由于服务器错误而无法处理地址解析请求。如果您再试一次，该请求可能会成功）

//ZERO_RESULTS（未找到此 GeocoderRequest 的结果）

if (status == google.maps.DirectionsStatus.OK) {

document.getElementById("content_text").innerHTML = results[0].formatted_address;

}else {

});

//============================================================================================

</script></head><body onload="initialize()">

<div id="map_canvas" style="width: 80%; height: 100%; float: left;"></div>

<div id="Div1" style="width: 20%; height: 100%; overflow: scroll;">

<hr />

<p style="text-align: center;">

维度：<span id="lat_text"></span><br />

经度：<span id="lng_text"></span><br />

对应地址信息：<span id="content_text"></span>

</p>

</div>

</body>

</html>