Google Maps API 地图线路相关
本位属转载，作者：再见西瓜虫简介
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: <bodyonunload="GUnload()" style="margin: 0px 0px 0px 0px;"> 170: <div id="map" style="width: 320px; height: 480px;"> 171: </div> 172: </body> 173: </html>
页:
[1]