使用google map v3 api 开发地图服务

API学习地址

其实google map的api很简单的，这里是学习文档的传送门http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html

代码的一些实例

可以国际化的google map

在language后面写上语言国家缩写就可以国际化google map了

Map类

初始化地图的方法：

var 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是类似枚举的东西，详细参考api

3、mainMapLayer是我的地图div对象的id名，这个div要指明高度和宽度要不地图没法初始化

Marker类、InfoWindow类

添加自定义的marker：

var 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对象要重用时使用下面语句重新使用

userMarker.setMap(null);

4、最后是为marker对象添加点击事件，使用的是嵌套写法（用在for循环里更好使）

5、infowindow是弹出的那个大窗体，他的setContent方法是支持html和css代码的，可以放进去div或table设置样式

LatLngBounds类
Map范围自适应：

var 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 : "imageAddress"
	});
	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类
提交地址字符串返回经纬度（很好用的功能），查询全靠它

var 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);
		}
	});

 地图导航服务

var 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;