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 initialize(){
           if (GBrowserIsCompatible){
             map = new GMap2( document.getElementById( 'map'));
             map.addControl( new GOverviewMapControl());
             //设置平移/缩放控件
             var customUI = map.getDefaultUI();
             customUI.maptypes.hybrid = false;
             map.setUI(customUI);

            geocoder = new GClientGeocoder();
            map.setCenter(new GLatLng(31.2694543, 121.4960861), 14);
           }
        }

 

输入一对经纬度，可以显示地址，并标记：

 function showAddress(longitude, latitude){
            //清除标记
            map.clearOverlays();
            var address = new GLatLng(longitude,latitude);
            map.setCenter(address, 14);
            showIcon(address, "Image/3dcar_04.png", "You are here!")
            
        }

 

输入多对经纬度，可以显示路线，这里是三对：

function showWay(longitude1,longitude2,longitude3,latitude1,latitude2,latitude3){
            //清除标记
             map.clearOverlays();
             var destinationA = new GLatLng(longitude1,latitude1);
             var destinationB = new GLatLng(longitude2,latitude2);
             var destinationC = new GLatLng(longitude3,latitude3);
             var line1 = new GPolyline([destinationA,destinationB],"#C00080", 5,0.7);
             var line2 = new GPolyline([destinationB,destinationC],"#C00080", 5,0.7);
             map.setCenter(destinationB, 14);
            //画线
            map.addOverlay(line1);
            map.addOverlay(line2);
            
            showIcon(destinationA, "Image/3dcar_04.png", "起点!");
            showIcon(destinationB, "Image/3dcar_04.png", "中点!");
            showIcon(destinationC, "Image/3dcar_04.png", "终点!");
        }

 

其中，showIcon是用来显示用户自定义的标记的函数，为了方便也可以使用默认的标记。

自定义标记：

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定位，输入的是经纬度值。也可以直接输入地址进行查询的。

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