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;
原文地址:
如果涉及版权问题,请留言与我联系!我会及时删除!