本位属转载，作者：再见西瓜虫
简介
Google Maps JavaScript API方便用户将Google Map嵌入到他们的网页中，在iPhone中若要调用JavaScript API, 需要创建UIWebView并将HTML页面嵌入到UIWebView中。
源码：
简介
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&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 onload="load()" onunload="GUnload()" style="margin: 0px 0px 0px 0px;">
170: <div id="map" style="width: 320px; height: 480px;">
171: </div>
172: </body>
173: </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
