Google Map API

我们在很多网页中都能看到地图导航，比如很多租房网站，都嵌入了地图搜索功能。

其实，实现起来并不难，只需一个Google Map的API。这个小实例，是模仿运输车辆的GPS定位。车辆向服务器发回一个由经度和纬度组成的坐标，就可以实现车辆的实时监控和路线管理等。

先熟悉一下概念：API

API: Application Programming Interface, 应用程序编程接口

是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Google Map提供了API供开发人员将Google Map嵌入到自己的网页中。Google Map API

发布使用Google Map的API，需要先获取API 密钥，挺麻烦的，但是，如果不发布，只是自己本地练习，没有密钥也是一样可以的。

Google提供了大量的文档和实例供开发人员参考。

下面是我个人做的一个小Demo：

有两个功能，一个是显示地址，一个是显示路线，都很容易实现。

首先，引用Google Map 的API：

其中，key是API密钥，本地练习，可以省略。

<script src="http://maps.google.com/maps?file=api&v=2&key='Google Map API Key'" type="text/javascript"></script>

页面载入时，显示地图：

代码

function showIcon(point, imgPath, contentInfo){
var truckIcon = new GIcon(G_DEFAULT_ICON);
truckIcon.image= imgPath;
truckIcon.shadow = null;
truckIcon.iconSize = new GSize(50, 50);
truckIcon.iconAnchor = new GPoint(25, 25);
truckIcon.infoWindowAnchor = new GPoint(25, 25);
var markerOptions = { icon:truckIcon };
var marker = new GMarker(point,markerOptions);
map.addOverlay(marker,markerOptions);
marker.openInfoWindowHtml(contentInfo);
if(contentInfo!=""){
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml(contentInfo);
});
}
}

这里是模仿GPS定位，输入的是经纬度值。也可以直接输入地址进行查询的。

最后的效果图：我画的是直线，也可以画成路径，还可以自动计算路程，只是所用的方法不一样，可以根据实际需要来选择。