API学习地址其实google map的api很简单的,这里是学习文档的传送门http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html代码的一些实例可以国际化的google map[html] view plaincopy 在language后面写上语言国家缩写就可以国际化google map了Map类初始化地图的方法:[javascript] view plaincopyvar myOptions = {     zoom : 11,     center : new google.maps.LatLng(30.1234567,120.3456789),     mapTypeId : google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mainMapLayer"),myOptions); 1、center是指地图定位的坐标,需要LatLng对象,对象参数就是纬度和经度2、mapTypeId是类似枚举的东西,详细参考api3、mainMapLayer是我的地图div对象的id名,这个div要指明高度和宽度要不地图没法初始化Marker类、InfoWindow类添加自定义的marker:[javascript] view plaincopyvar userMarker = new google.maps.Marker( {         position : new google.maps.LatLng(30,120),         map : map,         title : "鼠标悬浮时提示的信息",         icon : "图片位置字符串"     }); var yourInfoWindow;                         (function(userMarker) {     google.maps.event.addListener(userMarker, 'click', function() {         if (!yourInfoWindow) {             yourInfoWindow = new google.maps.InfoWindow( {});         }         yourInfoWindow.setContent(userMarker.title);         yourInfoWindow.open(map, userMarker);     }); })(userMarker); 1、Marker类是为地图上添加类似小图钉似的提示位置用的东西2、Marker需要设置坐标和地图对象来初始化3、同一个Marker对象要重用时使用下面语句重新使用[javascript] view plaincopyuserMarker.setMap(null); 4、最后是为marker对象添加点击事件,使用的是嵌套写法(用在for循环里更好使)5、infowindow是弹出的那个大窗体,他的setContent方法是支持html和css代码的,可以放进去div或table设置样式LatLngBounds类Map范围自适应:[javascript] view plaincopyvar bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(30,120)); //为新的结果创建marker for ( var i in member) {     bounds.extend(new google.maps.LatLng(member[i][2],member[i][3]));     var marker = new google.maps.Marker( {         position : new google.maps.LatLng(member[i][2], member[i][3]),         map : map,         title : "title",         icon : "p_w_picpathAddress"     });     markers.push(marker);     //为marker添加infowindow,添加点击事件     (function(i, marker) {         google.maps.event.addListener(             marker,             'click',             function() {                 if (!infoawindow) {//单例infowindow                     infoawindow = new google.maps.InfoWindow(                                                         {});                 }                 infoawindow.open(map, marker);         });     })(i, marker); } map.fitBounds(bounds);//这句最重要 Geocoder类提交地址字符串返回经纬度(很好用的功能),查询全靠它[javascript] view plaincopyvar geocoder = new google.maps.Geocoder();     geocoder.geocode( {         'address' : "格式可以是不分割的:北京市东城区东直门,或北京市,东城区,东直门"     }, function(results, status) {         if (status == google.maps.GeocoderStatus.OK) {             myLatLng = results[0].geometry.location;             //results数组里有很多有用的信息,包括坐标和返回的标准位置信息         } else {             alert(interGeoAnalysisFailed);         }     });  地图导航服务[javascript] view plaincopyvar map;    //地图对象   var mode = google.maps.DirectionsTravelMode.DRIVING;    //谷歌地图路线指引的模式 var directionsDisplay = new google.maps.DirectionsRenderer();   //地图路线显示对象 var directionsService = new google.maps.DirectionsService();    //地图路线服务对象 var directionsVisible = false;  //是否显示路线 directionsDisplay.setMap(null); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); //将路线导航结果显示到div中     var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false}; directionsService.route (     request,     function(response, status)     {         if (status == google.maps.DirectionsStatus.OK)         {                 directionsDisplay.setDirections(response);         }     } ); directionsVisible = true;

原文地址:

如果涉及版权问题,请留言与我联系!我会及时删除!