方向服務谷歌地圖

我正在使用谷歌地圖上的定向服務，我想知道如何更改由服務呈現的PlaceMark信息，我想在每個地標中放置自定義消息而不是它自動檢索到的數據...方向服務谷歌地圖

這就是我一直在做的事情，我傳遞了一些觀點，我想通過它生成的地標添加自定義信息，例如在第一個值中它會生成標在某一點上，我想，標有一些自定義的信息

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Waypoints in directions</title> 
    <style> 
    html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     #panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 

    </style> 





<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(18.451245, -69.928507); 
    var mapOptions = { 
    zoom: 60, 
    center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 

} 

function calcRoute() { 
    var start = document.getElementById('start').value; 
var end = document.getElementById('end').value; 
    var waypts = []; 
    var checkboxArray = document.getElementById('waypoints'); 
    for (var i = 0; i < checkboxArray.length; i++) { 
    if (checkboxArray.options[i].selected == true) { 
     waypts.push({ 
      location:checkboxArray[i].value, 
      stopover:true}); 
    } 
    } 

    var request = { 
     origin: start, 
    destination: end, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var total = 0; 
     var route = response.routes[0]; 
     var summaryPanel = document.getElementById('directions_panel'); 
     summaryPanel.innerHTML = ''; 
     // For each route, display summary information. 
     for (var i = 0; i < route.legs.length; i++) { 
     var routeSegment = i + 1; 
     summaryPanel.innerHTML += '<b>Ruta: ' + routeSegment + '</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>'; 
     total = total + route.legs[i].distance; 
     } 
    } 
     computeTotalDistance(directionsDisplay.getDirections()); 
    }); 
} 

function computeTotalDistance(result) { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) { 
    total += myroute.legs[i].distance.value; 
    } 
    total = total/1000.0; 
    document.getElementById('total').innerHTML = total + ' km'; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
     <h1>Hola Cristopher</h1> 
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div> 
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
    <div style="margin:20px;border-width:2px;"> 
    <b>Punto de Partida:</b> 
    <select id="start"> 
     <option value="18.451245, -69.928507">JI </option> 

    </select> 
    <br> 
    <br> 
    <select multiple id="waypoints"> 

      <option value="19.271164, -69.430184">Samaana </option> 
       <option value=" 18.195974, -71.239046">Barahona </option> 
      <option value="18.933488,-70.408482">Bonao </option> 

    </select> 
    <br> 
    <br> 
    <b>Punto Final: </b> 
    <select id="end"> 
     <option value="18.451071, -69.927365">El Metro </option> 
    </select> 


    <br> 
    <br> 
     <input type="submit" onclick="calcRoute();"> 
    </div> 
    <p>Distancia Total : <span id="total"></span></p> 
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
    <div id="map-canvas"></div> 
    </div> 
    </body> 
</html>

來源

2014-12-22 Cristopher Lopez

你有什麼「航點」元件。你有超過1個元素有id'航點'嗎？ –

我只是傳遞了7個值，例如：value =「18.5412230700194，-70.509913898719」 –

您必須詳細說明問題以及您的代碼的期望結果和描述，以及它的元素（只有您自己知道） – Codeek

你可以在使用谷歌標記與谷歌信息窗口結合：

這是用來在其上創建信息窗口的標誌：

var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: "Your custom title here"+i 

}); 
var infoWindow = new google.maps.InfoWindow({ 
content: infowindows[i]; 
});

如果你把一個數組或東西來保存您的自定義信息：

var infowindows = ["<Your custom info here> 1","<Your custom info here> 2","<Your custom info here> 3"] 

    function createMarkersWithInfo(){ 

     for (var i = 0; i < result.length; i++) { 
      var loacations = result[i].routes[0]; 
      var myLatLng = new google.maps.LatLng(locations[1], locations[2]); 

      var markers[]; 
      markers.push(new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: "Your custom title here"+i 

       })); 

    //This is from the you.arenot.me reference 
    for(var i = 0 i< markers.length; i++){ 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(infoWindows[i]); 
     infowindow.open(map, this); 

     }); 
    } 

    } 

}

我還沒有測試過，但這是給你一個想法，我已經修改了谷歌的例子有點太向你展示它如何完成。

採取在谷歌API參考定睛一看： InfoWindow和Marker和A solution sample with more than 1 marker

來源

2014-12-22 14:09:25 VeldMuijz

var directionsDisplay = new google.maps.DirectionsRenderer({ 
     suppressMarkers: true 
    });

，然後添加自定義標記之後，因此將刪除你的預設標記

來源

2016-11-11 11:50:20

方向服務谷歌地圖

回答

相關問題