PDA开发系列：Google地图接口
Google的地图接口，相信大家都不陌生，N多人都比我这个菜鸟熟悉得多，我就不班门弄斧了，在这里我只介绍在我们项目中用到的几个实现。
在我们的项目中，需求很简单，主要有以下几个方面：
1.在地图上描点，显示已经标注过的点的名字。
2.在地图上用不同的点显示在线人员的位置。
3.显示人员的移动轨迹。
我们用的Google的地图API的V3版本，因为V2版本要根据网址生成不同的密钥，很麻烦，而V3就不需要。下面是实现的效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<title>Google Maps</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<SCRIPT type=text/javascript>
window.onload=function()
{
var myLatlng = new google.maps.LatLng(31.165598, 121.519861);
var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ position: myLatlng, title:"白宫" });
marker.setMap(map);
var flightPlanCoordinates = [ new google.maps.LatLng(31.165598, 121.519861), new google.maps.LatLng(31.166598, 121.518861), new google.maps.LatLng(31.163598, 121.516861), new google.maps.LatLng(31.164598, 121.517861) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "green", strokeOpacity: 1.0, strokeWeight: 5 }); flightPath.setMap(map);
var contentString = '白宫'; var infowindow = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
var image = new google.maps.MarkerImage("http://files.cnblogs.com/HOH/User.ico");
var myLatLng = new google.maps.LatLng(31.165798, 121.517861);
var beachMarker = new google.maps.Marker({position: myLatLng,map: map,icon: image,title:"奥巴马" });
}
</SCRIPT>
</HEAD>
<BODY >
<DIV style="WIDTH: 500; HEIGHT: 500" id=map_canvas></DIV></BODY></HTML>
下面是运行的效果：
