- Dart : 1.8.3
- Bootstrap : 3.2.0
- include file dart.js,interop.js
Start:
Waypoints:
(Ctrl-Click for multiple selection)
End:
Waypoints:
(Ctrl-Click for multiple selection)
End:
Total Distance:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=・・・・&sensor=false"></script> <style type="text/css"> #map-canvas { height: 400px } </style> <div id="map-canvas" style="float:left;width:70%;"></div> <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> <div style="margin:20px;border-width:2px;"> <b>Start:</b> <select id="start"> <option value="35.6813,139.7661">東京駅</option> <option value="35.6842,139.7629">大手町駅</option> </select> <br> <b>Waypoints:</b> <br> <i>(Ctrl-Click for multiple selection)</i> <br> <select multiple id="waypoints"> <option value="35.6857,139.7612">大手門</input> <option value="35.6795,139.7577">二重橋前</input> <option value="日本, 東京都港区芝公園4-2-8">東京タワー</input> <option value="日本, 東京都中央区浜離宮庭園1-1">浜離宮恩賜庭園</input> </select> <br> <b>End:</b> <select id="end"> <option value="35.6813,139.7661">東京駅</option> <option value="35.6842,139.7629">大手町駅</option> </select> <br> <input type="submit" id="calcroute"> </div> <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> </div> <div id="directionsPanel" style="float:right;width:30%;height 100%"> <p>Total Distance: <span id="total"></span></p> </div> <script type="application/dart" src='http://www.example.com/wp/wp-content/themes/ang/dart/marker1/index.dart'></script> <script src='http://www.example.com/wp/wp-content/themes/ang/dart/packages/browser/dart.js'></script> <script src='http://www.example.com/wp/wp-content/themes/ang/dart/packages/browser/interop.js'></script>
library google_maps; import 'dart:html' show querySelector; import 'dart:js' show context, JsObject; computeTotalDistance(result) { var total = 0; var myroute = result["routes"][0]; var summaryPanel = querySelector('#directions_panel'); summaryPanel.innerHtml = ''; for (var i = 0; i < myroute["legs"].length; i++) { total += myroute["legs"][i]["distance"]["value"]; var routeSegment = i + 1; summaryPanel.innerHtml += '<b>Route Segment: ' + routeSegment.toString() + '</b><br>'; summaryPanel.innerHtml += myroute["legs"][i]["start_address"] + ' to '; summaryPanel.innerHtml += myroute["legs"][i]["end_address"] + '<br>'; summaryPanel.innerHtml += myroute["legs"][i]["distance"]["text"] + '<br><br>'; } total = total / 1000.0; print(total); var totalPanel = querySelector('#total'); totalPanel.innerHtml = total.toString() + ' km'; } void main() { final google_maps = context['google']['maps']; var center = new JsObject(google_maps['LatLng'], [35.6814, 139.7661]); var mapTypeId = google_maps['MapTypeId']['ROADMAP']; var mapOptions = new JsObject.jsify({ "center": center, "zoom": 15, "mapTypeId": mapTypeId }); var map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]); var polyOptions = new JsObject.jsify({ "strokeColor": '#ff0000', "strokeOpacity": 0.7, "strokeWeight": 7 }); var rendererOptions = new JsObject.jsify({ "draggable": true, "polylineOptions": polyOptions }); var directionsService = new JsObject(google_maps['DirectionsService'], []); var directionsDisplay = new JsObject(google_maps['DirectionsRenderer'], [rendererOptions]); directionsDisplay.callMethod('setMap',[map]); //directionsDisplay.callMethod('setPanel',[querySelector('#directionsPanel')]); google_maps['event'].callMethod('addListener', [directionsDisplay, 'directions_changed', () { var direction = directionsDisplay.callMethod('getDirections',[]); computeTotalDistance(direction); }]); var calcroute = querySelector('#calcroute'); calcroute.onClick.listen((event) { var start = querySelector('#start'); var end = querySelector('#end'); List waypts = new List(); var checkboxArray = querySelector('#waypoints'); checkboxArray.children.forEach((el) { if (el.selected == true) { var waypt = new JsObject.jsify({ "location": el.value, "stopover": true }); waypts.add(waypt); } }); var request = new JsObject.jsify({ "origin": start.value, "destination": end.value, "waypoints": waypts, "optimizeWaypoints": true, "travelMode": google_maps['TravelMode']['WALKING'] }); directionsService.callMethod('route',[request,(response, status) { if (status == google_maps['DirectionsStatus']['OK']) { directionsDisplay.callMethod('setDirections',[response]); var route = response["routes"][0]; var summaryPanel = querySelector('#directions_panel'); summaryPanel.innerHtml = ''; for (int i = 0; i < route["legs"].length; i++) { var routeSegment = i + 1; summaryPanel.innerHtml += '<b>Route Segment: ' + routeSegment.toString() + '</b><br>'; summaryPanel.innerHtml += route["legs"][i]["start_address"] + ' to '; summaryPanel.innerHtml += route["legs"][i]["end_address"] + '<br>'; summaryPanel.innerHtml += route["legs"][i]["distance"]["text"] + '<br><br>'; } } }]); }); }