Google Maps JavaScript API V3常用方法
-
一、公共代码
<body οnlοad="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.获取点击处经纬度坐标
2.可视区域经纬度坐标范围
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.鼠标移到标记显示标记信息
5.自定义控件
<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>