您的位置:婷婷的个人主页>>日志>>Google Maps JavaScript API v3 根据城市获取 经度纬度

文章中心
装修推荐

Google Maps JavaScript API v3 根据城市获取 经度纬度

作者:admin 来源:本站原创 发布时间:2012-07-10 点击数: 转播到腾讯微博

上次看google map api的时候还是V2的,现在已经V3了,当需要实现通过搜索城市获取经纬度这么个功能时该如何实现呢,下面和大家分享下。

<!DOCTYPE html>
<html> 
<head>      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(28.692395,115.85907);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
                map.setCenter(results[0].geometry.location);
                this.marker = new google.maps.Marker({
                    title: address,
                    map: map,
                    position: results[0].geometry.location
                });
                var infowindow = new google.maps.InfoWindow({
                    content: '<strong>' + address + '</strong><br/>' + '纬度: ' + lat + '<br/>经度: ' + lng
                });
                infowindow.open(map, marker);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
</script>
</head>
<body onload="initialize()">
  <div>
    <input id="address" type="textbox" value="南昌市">
    <input type="button" value="地址解析" onclick="codeAddress()">
  </div>
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>

责任编辑:本站编辑 发表评论>>
相关文章