Question

我们需要一些帮助。我们在谷歌地图代码下方工作正常。唯一的问题是我们需要将航点中的文本自定义为整数。这可能吗？这就是我们想要的：http://screencast.com/t/TKFOAB7UQ

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps API</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?     sensor=false&libraries=places"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
<div style="width: 100%">
<div id="map-canvas" style="width: 950px; height: 400px; float: left;"></div> 
<div id="panel" style="width: 300px; float: left;"></div> 
</div>


<script type="text/javascript"> 
function initialize() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

 var map = new google.maps.Map(document.getElementById('map-canvas'), {
 zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [ {  featureType:'water',  stylers:[{color:'#46bcec'},{visibility:'on'}] },{         featureType:'landscape',  stylers:[{color:'#f2f2f2'}] },{  featureType:'road',  stylers:        [{saturation:-100},{lightness:45}] },{  featureType:'road.highway',  stylers:    [{visibility:'simplified'}] },{  featureType:'road.arterial',  elementType:'labels.icon',  stylers:   [{visibility:'off'}] },{  featureType:'administrative',  elementType:'labels.text.fill',  stylers:   [{color:'#444444'}] },{  featureType:'transit',  stylers:[{visibility:'off'}] },{  featureType:'poi',   stylers:[{visibility:'off'}] }],
   });

directionsDisplay.setMap(map);
// directionsDisplay.setPanel(document.getElementById('panel'));

   var waypts   = [{location:new google.maps.LatLng(1.33202, 103.67673), stopover:true},                   {     location:new google.maps.LatLng(1.29418, 103.84943), stopover:true}];
    var request = {
    origin: new google.maps.LatLng(1.25675, 103.82033), 
   destination: new google.maps.LatLng(1.28627, 103.85927),
    waypoints: waypts,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

  directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response); 

  }
 });


 }


 initialize();
  </script> 
</body> 
</html>

Answer 1

你能做什么，不是用字母显示标记而是自己做。

这是一个例子。看我的 - 第4行：suppressMarkers：是的 - 第40行：在这里你也可以改变图标的颜色。请查看链接以获取更多信息。

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers : true
  });
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [ { featureType:'water', stylers:[{color:'#46bcec'},{visibility:'on'}] },{ featureType:'landscape', stylers:[{color:'#f2f2f2'}] },{ featureType:'road', stylers: [{saturation:-100},{lightness:45}] },{ featureType:'road.highway', stylers: [{visibility:'simplified'}] },{ featureType:'road.arterial', elementType:'labels.icon', stylers: [{visibility:'off'}] },{ featureType:'administrative', elementType:'labels.text.fill', stylers: [{color:'#444444'}] },{ featureType:'transit', stylers:[{visibility:'off'}] },{ featureType:'poi', stylers:[{visibility:'off'}] }],
  });
  directionsDisplay.setMap(map);
  // directionsDisplay.setPanel(document.getElementById('panel'));
  var waypts   = [
    {location:new google.maps.LatLng(1.33202, 103.67673), stopover:true}, 
    {location:new google.maps.LatLng(1.29418, 103.84943), stopover:true}
  ];
  var request = {
    origin: new google.maps.LatLng(1.25675, 103.82033), 
    destination: new google.maps.LatLng(1.28627, 103.85927),
    waypoints: waypts,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var markerCounter = 1;
      directionsDisplay.setDirections(response);
      // add custom markers
      var route = response.routes[0];
        // start marker
      addMarker(route.legs[0].start_location, markerCounter++);
        // the rest
      for (var i = 0; i < route.legs.length; i++) {
        addMarker(route.legs[i].end_location, markerCounter++);
      }
    }
  });
  function addMarker(position, i) {
    return new google.maps.Marker({
      // @see http://stackoverflow.com/questions/2436484/how-can-i-create-numbered-map-markers-in-google-maps-v3 for numbered icons
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + i + '|FF0000|000000',
      position: position,
      map: map
    })
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

我们如何在航点Google Map API中将A，B，C ..替换为1,2,3 ..

1 个答案: