Google Maps API 地图线路相关

wonderzl · 发表于 2013-1-29 09:32:04

本位属转载，作者：再见西瓜虫

简介

Google Maps JavaScript API方便用户将Google Map嵌入到他们的网页中，在iPhone中若要调用JavaScript API, 需要创建UIWebView并将HTML页面嵌入到UIWebView中。

源码：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5: <title>Google 地图 JavaScript API 示例</title> 6: <script src="http://ditu.google.com/maps?file=api&amp;v=2" type="text/javascript"></script> 7: <script type="text/javascript"> 8: var map = null;// GMap2对象 9: var directions = null;// GDirections对象 10: var isFirstClick = true; // 用于判断地图上是否已有路线 11: var firstPin = null;// 清除地图上所有的控件后，第一次点击生成的GMarker对象 12: var secondPin = null;// 第二次点击的GMarker对象 13: var polyline = null;// 路线 14: 15: var zoomLevel = null;// 缩放等级 16: var center = null;// 地图中心 17: 18: var defaultPin = 'file:\\E:/Pin2.png';// 默认大头针图片 19: var movedPin = 'file:\\E:/PinFloating.png';// 移动时的大头针图片 20: 21: function load() { 22: if (GBrowserIsCompatible()) { 23: map = new GMap2(document.getElementById("map")); 24: map.setCenter(new GLatLng(31.877557643340015, 117.24609375), 13); 25: map.disableDoubleClickZoom(); 26: directions = new GDirections(map); 27: 28: //自定义GMarker. 29: var pinIcon = new GIcon(G_DEFAULT_ICON); 30: pinIcon.image = defaultPin; 31: pinIcon.iconSize = new GSize(29, 32); 32: pinIcon.iconAnchor = new GPoint(5, 27); 33: pinIcon.shadow = null; 34: markOptions = { draggable: true, icon: pinIcon };// 这这里我们设置GMarker可以拖动. 35: 36: // 对firstPin和secondPin进行初始化. 37: firstPin = new GMarker(new GLatLng(31.877557643340015, 117.24609375), markOptions); 38: secondPin = new GMarker(new GLatLng(31.877557643340015, 117.24609375), markOptions); 39: 40: // 添加监听. 41: addMapClickListener(); 42: addDraggingListener(); 43: addDirectionsListener(); 44: } 45: 46: // 监听地图的点击事件. 47: function addMapClickListener() { 48: if (map != null) { 49: GEvent.addListener(map, "click", function (marker, point) { 50: if (marker) { 51: map.removeOverlay(marker); 52: } 53: else { 54: if (isFirstClick == true) { 55: // 因为我们只想地图上只有一条路线，所以 56: // 在每次添加起点大头针时，清除地图上所有的控件. 57: map.clearOverlays(); 58: polyline = null; 59: isFirstClick = false; 60: 61: firstPin.setLatLng(point); 62: map.addOverlay(firstPin); 63: } 64: else { 65: isFirstClick = true; 66: secondPin.setLatLng(point); 67: map.addOverlay(secondPin); 68: 69: // 获取最短路径. 70: loadDirections(firstPin.getLatLng(), secondPin.getLatLng(), null); 71: } 72: } 73: }); 74: } 75: } 76: 77: // 监听大头针的拖动事件. 78: function addDraggingListener() { 79: if (firstPin != null && secondPin != null) { 80: 81: // 当开始拖动大头针时，我们需要将大头针的图片(Pin2.png)修改成拖动时的图片(PinFloating.png). 82: GEvent.addListener(firstPin, 'dragstart', function (latlng) { 83: firstPin.setImage(movedPin); 84: }); 85: 86: GEvent.addListener(secondPin, 'dragstart', function (latlng) { 87: secondPin.setImage(movedPin); 88: }); 89: 90: // 当结束拖动时，需要将大头针的图片改回拖动前，并重新获取最短路线. 91: GEvent.addListener(firstPin, 'dragend', function (latlng) { 92: firstPin.setImage(defaultPin); 93: 94: if (latlng != null && polyline != null) { 95: 96: window.setTimeout(function () { 97: loadDirections(latlng, secondPin.getLatLng()); 98: }, 300); 99: } 100: }); 101: 102: GEvent.addListener(secondPin, 'dragend', function (latlng) { 103: secondPin.setImage(defaultPin); 104: 105: if (latlng != null && polyline != null) { 106: 107: window.setTimeout(function () { 108: loadDirections(firstPin.getLatLng(), latlng); 109: }, 350); 110: } 111: }); 112: } 113: } 114: 115: // 获取最短路径. 116: function loadDirections(startLatLng, endLatLng, travelModel) { 117: 118: if (startLatLng == null || endLatLng == null) { 119: return; 120: } 121: 122: // 获取缩放级别和中心点的经纬度. 123: // 由于在GDirections.load得到经纬度之后，地图会自动缩放并平移， 124: // 所以需要在这里获取到load之前的值，在load结束后重新修改缩放级别 125: // 和中心点. 126: zoomLevel = map.getZoom(); 127: center = map.getCenter(); 128: 129: if (travelModel == null) { 130: directions.loadFromWaypoints(new Array(startLatLng, endLatLng)); 131: } 132: else { 133: directions.loadFromWaypoints(new Array(startLatLng, endLatLng), 134: { travelMode: travelModel }); 135: } 136: } 137: 138: // 监听GDirection的'addOverly'事件. 139: function addDirectionsListener() { 140: 141: // 由于地图会在GDirection.load事件后自动添加起点和终点的GMarker控件， 142: // 这是在页面上会出现2个起点和2个终点，我们需要将自动添加的GMarker删除, 143: // 并重新添加|firstPin|和|secondPin|。同时clearOverlays方法也会将地图 144: // 上的路线删除，所以我们在添加Garker的同时，也需要将路线重新添加到Map. 145: GEvent.addListener(directions, 'addoverlay', function () { 146: if (directions != null) { 147: map.clearOverlays(); 148: 149: var startMarker = directions.getMarker(0); 150: var endMarker = directions.getMarker(1); 151: polyline = directions.getPolyline(); 152: 153: firstPin.setLatLng(startMarker.getLatLng()); 154: secondPin.setLatLng(endMarker.getLatLng()); 155: 156: map.addOverlay(firstPin); 157: map.addOverlay(secondPin); 158: map.addOverlay(polyline); 159: 160: map.setZoom(zoomLevel); 161: map.setCenter(center); 162: } 163: }); 164: } 165: } 166: 167: </script> 168: </head> 169: <body onunload="GUnload()" style="margin: 0px 0px 0px 0px;"> 170: <div id="map" style="width: 320px; height: 480px;"> 171: </div> 172: </body> 173: </html>

		自动登录	找回密码
密码			立即注册