更改谷歌地图上方向的默认标记

Change default markers for directions on google maps

本文关键字：默认 方向 谷歌地图      更新时间：2023-09-26

我是一个完全熟悉谷歌地图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}); 
  }

问题是，我想把我从谷歌上得到的地图上的A和B标记改为我正在使用的每个点的标记（每个点在数据库中都有特定的图标），但我不知道如何做到这一点。

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

 (a) Street A
 directions
 (b) Street B

我想要

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

我知道我对这个主题的了解非常缺乏，这个问题可能有点模糊，但如果有任何提示，我将不胜感激。

编辑：好的，我从这个问题的谷歌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的弹出窗口不会显示）

我在方向输出中的标记也有问题。如果没有一些极其繁琐的js，就无法更换标记，这些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;
}

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

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

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

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

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

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

此设置适用于我的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,
        }
      }
    );

谢谢。

更改方向上的两个默认标记。谷歌地图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
相关文章：