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.获取点击处经纬度坐标
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>