Google Maps API地図回線関連
9345 ワード
本人は転載に属して、作者:さようならスイカ虫
概要
Google Maps JavaScript APIは、ユーザーがGoogle Mapを彼らのウェブページに埋め込むのに便利であり、iPhoneでJavaScript APIを呼び出すには、UICWebViewを作成し、HTMLページをUICWebViewに埋め込む必要がある.
ソース:
概要
Google Maps JavaScript APIは、ユーザーがGoogle Mapを彼らのウェブページに埋め込むのに便利であり、iPhoneでJavaScript APIを呼び出すには、UICWebViewを作成し、HTMLページをUICWebViewに埋め込む必要がある.
ソース:
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>