Question

我正在使用方向服务从谷歌地图，我想知道如何更改由服务呈现的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>

Answer 1

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

然后添加自定义标记后，它将删除预定义标记

Answer 2

您可以将谷歌标记与Google InfoWindows结合使用：

这用于创建一个带有信息窗口的标记：

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);

      });
     }

  }

}

我还没有对此进行过测试，但这是为了给你一个想法，我已经修改了Google的例子，并告诉你如何做到这一点。

仔细查看Google API参考： InfoWindow和Marker以及A solution sample with more than 1 marker

方向服务谷歌地图

2 个答案: