标题: Google Maps JavaScript API V3常用方法

作者: dnawo

日期: 2011-05-01 09:41 AM

内容: 一、公共代码
复制内容到剪贴板程序代码<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>

</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>

+ 查看当前日志评论 (0)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms

标题: Google Maps JavaScript API V3常用方法

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms