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

问题是，我想将我从地图上谷歌获得的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的弹出窗口不会显示）

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

根据Google Maps API Document for GDirections，您应该可以为“起点”和“终点”拨打getMarker to get the Marker，然后使用GMarker上的setImage方法更改图片}：

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

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

参考：NetManiac - Changing markers icons with Google Maps API

Answer 4

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

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

5 个答案: