Google Maps JavaScript API V3常用方法

xaoyege

2013-02-20

关注关注

Web编程

Google Maps JavaScript API V3常用方法

一、公共代码

<body onload="initialize()">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- js code -->
</body>

二、常用方法
1.获取点击处经纬度坐标

<script type="text/javascript">
function initialize(){
    var myOptions = {
        center : new google.maps.LatLng(26.085963630752868, 119.29929775619507),//纬度,经度
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        navigationControl : true,
        mapTypeControl : true,
        scaleControl : true
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    google.maps.event.addListener(map, "click", function(event) {
        var point = event.latLng;
        alert("点坐标:(" + point.lng() + "," + point.lat() + ")");
    });
}
</script>

2.可视区域经纬度坐标范围

<script type="text/javascript">
function initialize(){
    var myOptions = {
        center : new google.maps.LatLng(26.085963630752868, 119.29929775619507),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        navigationControl : true,
        mapTypeControl : true,
        scaleControl : true
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    google.maps.event.addListener(map, "click", function(event) {
        var bounds = map.getBounds();
        var point1 = bounds.getNorthEast();
        var point2 = bounds.getSouthWest();
        alert("东北角:(" + point1.lng() + "," + point1.lat() + ")\r\n西南角:("  + point2.lng() + "," + point2.lat() + ")");
    });
}
</script>

3.鼠标移到标记显示标记信息

<script type="text/javascript">
function initialize(){
    var point = new google.maps.LatLng(26.085963630752868, 119.29929775619507);
    var myOptions = {
        center : point,
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        navigationControl : true,
        mapTypeControl : true,
        scaleControl : true
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var marker = new google.maps.Marker({
        position : point,
        map : map,
        title : "东街口"
    });
    //marker.setMap(map); //MarkerOptions中设置map属性则不需再调用setMap方法
    
    var infowindow = new google.maps.InfoWindow({
        content : "木子屋<hr>个人博客。[<a href='http://www.mzwu.com/' target='_blank'>进入网站</a>]"
    });
    
    google.maps.event.addListener(marker, "mouseover", function(event) {
        infowindow.open(map, marker);
    });
}
</script>

4.地址解析成经纬度信息

<script type="text/javascript">
var map;

function initialize(){
    var myOptions = {
        center : new google.maps.LatLng(26.085963630752868, 119.29929775619507),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        navigationControl : true,
        mapTypeControl : true,
        scaleControl : true
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({"address": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            for(var i=0;i<results.length;i++){
                map.setCenter(results[i].geometry.location);
                var marker = new google.maps.Marker({map: map,position: results[i].geometry.location});
                alert("lng:"+results[i].geometry.location.lng() + "\r\nlat:" + results[i].geometry.location.lat());
            }
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

setTimeout(function(){codeAddress("福建省福州市鼓楼区");}, 3000);
</script>

5.自定义控件

<script type="text/javascript">
function initialize(){
    var myOptions = {
        center : new google.maps.LatLng(26.085963630752868, 119.29929775619507),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    //自定义控件
    var homeControlDiv = document.createElement("DIV");
    homeControlDiv.style.paddingTop = "5px";
    var controlUI = new Image();
    controlUI.src = "http://www.mzwu.com/pic/201105/027.gif";
    homeControlDiv.appendChild(controlUI);
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
    //注意是用addDomListener
    google.maps.event.addDomListener(controlUI, "click", function(){
        alert("被你发现了^_^");
    }); 
}
</script>

原文请参考：http://www.mzwu.com/article.asp?id=2844

maps javascript