更改谷歌地图上路线的默认标记

Question

我是一个完整的 google maps api 菜鸟，我从一个给定的脚本开始，我正在编辑我需要做的事情。

在这种情况下，我有一张地图，其中包含来自数据库的一些点。 它们是这样的（在我从数据库中获取 lat/lng 之后）：

 var route1 =  'from: 37.496764,-5.913379 to: 37.392587,-6.00023'; 
 var route2 = 'from: 37.392587,-6.00023 to: 37.376964,-5.990838'; 
 routes = [route1, route2];

然后我的脚本执行以下操作：

 for(var j = 0; j < routes.length; j++) { 
    callGDirections(j);
      document.getElementById("dbg").innerHTML += "called "+j+"<br>";
} 

然后是方向：

 function callGDirections(num) {
        directionsArray[num] = new GDirections(); 
        GEvent.addListener(directionsArray[num], "load", function() { 
          document.getElementById("dbg").innerHTML += "loaded "+num+"<br>";
          var polyline = directionsArray[num].getPolyline(); 
          polyline.setStrokeStyle({color:colors[num],weight:3,opacity: 0.7}); 
          map.addOverlay(polyline); 
          bounds.extend(polyline.getBounds().getSouthWest());
          bounds.extend(polyline.getBounds().getNorthEast());
                map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds)); 
          }); 
 // === catch Directions errors ===
 GEvent.addListener(directionsArray[num], "error", function() {
var code = directionsArray[num].getStatus().code;
var reason="Code "+code;
if (reasons[code]) {
  reason = reasons[code]
} 

alert("Failed to obtain directions, "+reason);
  });
        directionsArray[num].load(routes[num], {getPolyline:true}); 
  }

问题是，我想将地图上从 google 获得的 A 和 B 标记更改为我正在使用的每个点的标记（每个点在数据库中都有特定的图标），但我不知道这该怎么做。

此外，如果有可能的话，那会很棒，但我一无所知：当我得到方向时，我会得到这样的东西：

 (a) Street A
 directions
 (b) Street B

而且我要

 (a) Name of first point
 directions
 (b) Name of second point (also from database)

我知道我对这个主题的知识非常缺乏，问题可能有点含糊，但我会很感激任何能指出我正确方向的提示。

编辑：好的，我从 google api 中学到了很多关于这个问题的知识，但我离我需要的还很远。 我学会了如何隐藏默认标记这样做：

 // Hide the route markers when signaled.
GEvent.addListener(directionsArray[num], "addoverlay", hideDirMarkers);
// Not using the directions markers so hide them.
function hideDirMarkers(){
    var numMarkers = directionsArray[num].getNumGeocodes()
    for (var i = 0; i < numMarkers; i++) {
        var marker = directionsArray[num].getMarker(i);
        if (marker != null)
            marker.hide();
        else
            alert("Marker is null");
    }
} 

现在，当我创建新标记时：

            var point = new GLatLng(lat,lng);
    var marker = createMarker(point,html);
    map.addOverlay(marker);

它们出现但不可点击（带有 html 的弹出窗口不会显示）

Answer 1

我也遇到了方向输出中的标记问题。 如果没有一些极其繁琐的 js，就无法替换标记，然后必须包括转弯方向等的解决方法。

一个简单的方法是通过 css：

A 行是一个表：

<table id="adp-placemark" class="adp-placemark" jstcache="0">

B线是：

<table class="adp-placemark" jstcache="0">

因此，以下 css 将更改标记：

#adp-placemark img, .adp-placemark img {
   display:none;
}
#adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_2.png) no-repeat left center;
}

Answer 2

我已经有两个标记，因为我首先使用了检测。 为了隐藏我使用的新“A”和“B”标记

google.maps.DirectionsRenderer({suppressMarkers: true});

Answer 3

此设置适用于我的 JS 项目。

    new new google.maps.DirectionsRenderer(
      {
        polylineOptions: { strokeColor: "blue" },
        markerOptions: {
          icon: {
            scaledSize: new google.maps.Size(35, 35), 
            url: 'http://res.cloudinary.com/tapsy/image/upload/v1572870098/u_fzktfv.png'
          },
          animation: google.maps.Animation.DROP,
        }
      }
    );

谢谢。

Answer 4

根据GDirections的Google Maps API 文档，您应该能够调用getMarker 来获取起点和终点的标记，然后使用GMarker上的setImage方法更改图像：

directionsArray[num].getMarker(0).setImage('IMAGE URL');

我没有谷歌地图设置来对此进行测试，但它应该更改开始标记的图像，如果您将索引从 0 更改为最后一个标记，您应该能够更改最后一个图像。 希望这可以帮助！

参考： NetManiac - 使用 Google Maps API 更改标记图标

Answer 5

更改方向上的两个默认标记。 谷歌地图 api v3 的代码。

    mapOptions = 
    center: new google.maps.LatLng(50.075538,14.437801),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP

map = new google.maps.Map($(".map_canvas").get(0), mapOptions)

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(suppressMarkers: true);
directionsDisplay.setMap(map);

request = 
    origin: $(".map_canvas").data('coords'),
    destination: '50.087349, 14.420756',
    travelMode: google.maps.TravelMode.DRIVING

directionsService.route request, (result, status) ->
    if status == google.maps.DirectionsStatus.OK
        directionsDisplay.setDirections(result)
        showSteps(result)

showSteps = (result) ->
    myRoute = result.routes[0].legs[0];

    new google.maps.Marker
        position: myRoute.steps[0].start_point,
        icon: 'http://maps.gstatic.com/intl/en_ALL/mapfiles/ms/micons/homegardenbusiness.png',
        map: map

    new google.maps.Marker
        position: myRoute.steps[myRoute.steps.length-1].start_point,
        map: map