要想使自己的产品在Google搜索结果有一个好的排名,我们不仅可以在提高Google搜索排名上下功夫,也可以改善我们的产品在Google搜索结果页的结构化数据样式,这样就能够以更准确、更具吸引力的方式将它们呈现给 Google用户,提高我们产品的点击率(CTR)。然后搜索结果点击率又和搜索排名是相互相成的,CTR越高,排名就可能越好。例如,当Google发现你的网页内容为结构化的产品详情、活动、食谱、评价或类似内容时,Google的算法便可以通过“丰富网页摘要”来完善您的搜索结果。 2012年12月,Google Webmaster Tools推出两项功能,它们可让你以更简单的方式使用结构化数据功能。 Google数据标注工具 …
May 26, 2015
谷歌地图查询两地开车路线 Google Maps API V3: DirectionsService (Driving Directions) example
In this article I will explain with example and attached source code, how to use the Google Maps API V3 to plot driving directions and route on Google Maps using the DirectionsService.
HTML Markup
The HTML Markup consists of two TextBoxes first one for entering Source address while the other for entering destination address, a Button and three HTML DIVs for displaying the distance and duration details, plotting map and displaying directions.
<table border="0" cellpadding="0" cellspacing="3"> <tr> <td colspan="2"> Source: <input type="text" id="txtSource" value="Bandra,%20Mumbai,%20India" style="width:%20200px" /> Destination: <input type="text" id="txtDestination" value="Andheri,%20Mumbai,%20India" style="width:%20200px" /> <br /> <input type="button" value="Get%20Route" onclick="GetRoute()" /> <hr /> </td> </tr> <tr> <td colspan="2"> <div id="dvDistance"> </div> </td> </tr> <tr> <td> <div id="dvMap" style="width:%20500px;%20height:%20500px"> </div> </td> <td> <div id="dvPanel" style="width:%20500px;%20height:%20500px"> </div> </td> </tr> </table>
Calculate Distance, Travel Duration, draw (plot) Route and display Directions using DirectionsService
Inside the Google Maps window load event handler, for the source and the destination TextBoxes I have implemented Google Places Autocomplete TextBox. For more details please refer Implement Google Places Autocomplete TextBox.
When the Button is clicked, first the Map and the Directions service is initialized to display the map and the directions in their respective HTML DIVs.
Then using the source and destination addresses from the respective TextBoxes, the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script type="text/javascript"> var source, destination; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); google.maps.event.addDomListener(window, 'load', function () { new google.maps.places.SearchBox(document.getElementById('txtSource')); new google.maps.places.SearchBox(document.getElementById('txtDestination')); directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); }); function GetRoute() { var mumbai = new google.maps.LatLng(18.9750, 72.8258); var mapOptions = { zoom: 7, center: mumbai }; map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('dvPanel')); //*********DIRECTIONS AND ROUTE**********************// source = document.getElementById("txtSource").value; destination = document.getElementById("txtDestination").value; var request = { origin: source, destination: destination, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); //*********DISTANCE AND DURATION**********************// var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({ origins: , destinations: [destination], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { var distance = response.rows[0].elements[0].distance.text; var duration = response.rows[0].elements[0].duration.text; var dvDistance = document.getElementById("dvDistance"); dvDistance.innerHTML = ""; dvDistance.innerHTML += "Distance: " + distance + "<br />"; dvDistance.innerHTML += "Duration:" + duration; } else { alert("Unable to find the distance via road."); } }); } </script>
Screenshot

下载:GoogleMaps_CalculateDistance