如何在Google Map API中替换A和B标记 [英] How to replace A and B markers in Google Map Api

问题描述

我使用

  google.maps.DirectionsRenderer（{suppressMarkers：true}）
  

删除Route中的标记。但是，这也会消除该路线中的路标标记。那么如何在路线中替换/删除'A'和'B'标记？ 一个例子，用自定义标记替换所有标记。

以下示例仅用自定义标记替换开始和结束标记。

自定义路线渲染器（将路线呈现为原生多段线和标记）：

  function RenderCustomDirections（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 waypts = []; 
 var bounds = new google.maps.LatLngBounds（）; 
 var route = response.routes [0]; 
 var summaryPanel = document.getElementById（directions_panel）; 
 var detailsPanel = document.getElementById（direction_details）; 
 startLocation = new Object（）; 
 endLocation = new Object（）; 
 
 summaryPanel.innerHTML =; 
 detailsPanel.innerHTML ='< ul>'; 
 
 //对于每条路线，显示汇总信息。 （var i = 0; i< route.legs.length; i ++）{
 var routeSegment = i + 1; 
 summaryPanel.innerHTML + =< b>路线段：+ 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 />; 
} 
 var path = response.routes [0] .overview_path; 
 var legs = response.routes [0] .legs; 
 for（i = 0; i< legs.length; i ++）{
 if（i == 0）{
 startLocation.latlng = legs [i] .start_location; 
 startLocation.address = legs [i] .start_address; 
 startLocation.marker = createMarker（legs [i] .start_location，start，legs [i] .start_address，green）; 
} else {
 waypts [i] = new Object（）; 
 waypts [i] .latlng = legs [i] .start_location; 
 waypts [i] .address = legs [i] .start_address; 
 waypts [i] .marker = createMarker（legs [i] .start_location，waypoint+ i，legs [i] .start_address，yellow）; 
} 
 endLocation.latlng = legs [i] .end_location; 
 endLocation.address = legs [i] .end_address; 
 var steps = legs [i] .steps; 
 for（j = 0; j  var nextSegment = steps [j] .path; （k = 0; k  polyline.getPath（）。push（nextSegment [k]）; 
; 
 bounds.extend（nextSegment [k]）; 
} 
} 
} 
 detailsPanel.innerHTML + =< / ul> 
 polyline.setMap（map）; 
 map.fitBounds（bounds）; 
 endLocation.marker = createMarker（endLocation.latlng，end，endLocation.address，red）; 
 // ==创建初始侧边栏== 
 makeSidebar（）; 
} else alert（status）; 
} 
  

createMarker函数：

 函数createMarker（latlng，label，html，color）{
 var contentString ='< b>'+ label&'< / b>< br>' + HTML; 
 var marker = new google.maps.Marker（{
 position：latlng，
 draggable：true，
 map：map，
 icon：getMarkerImage（color）， 
 shape：iconShape，
 title：label，
 zIndex：Math.round（latlng.lat（）*  -  100000）<<< 5 
}）; 
 marker.myname = label; 
 gmarkers.push（marker）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
返回标记; 
 
 $ / code $ / pre 
 
 
自定义图标功能：
 
 
 函数getMarkerImage（iconColor）{
 if（（typeof（iconColor）==undefined）||（iconColor == null））{
 iconColor =红色; 
 
 if（！icons [iconColor]）{
 icons [iconColor] = {
 url：mapIcons / marker _+ iconColor +。png，
 //此标记宽20像素，高34像素。 
 size：new google.maps.Size（20，34），
 //此图片的来源为0,0。 
 origin：new google.maps.Point（0,0），
 //此图片的锚点位于6,20。 
 anchor：new google.maps.Point（9，34））; 
} 
返回图标[iconColor]; 
} 
  
 
I'm using
google.maps.DirectionsRenderer({suppressMarkers: true})
to remove markers in Route. But this also removes waypoints markers in that route. So how to replace/remove 'A' and 'B' markers in a route?
解决方案
Here is an example that replaces all the markers with custom markers.

Here is an example that just replaces the start and end markers with custom markers.

The custom directions renderer (renders the directions as native polylines and markers):
function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
     waypts = [];
     var bounds = new google.maps.LatLngBounds();
     var route = response.routes[0];
     var summaryPanel = document.getElementById("directions_panel");
     var detailsPanel = document.getElementById("direction_details");
     startLocation = new Object();
     endLocation = new Object();

     summaryPanel.innerHTML = "";
     detailsPanel.innerHTML = '<ul>';

     // For each route, display summary information.
     for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += "<b>Route Segment: " + 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 />";
     }
     var path = response.routes[0].overview_path;
     var legs = response.routes[0].legs;
     for (i=0;i<legs.length;i++) {
       if (i == 0) { 
         startLocation.latlng = legs[i].start_location;
         startLocation.address = legs[i].start_address;
         startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
       } else { 
         waypts[i] = new Object();
         waypts[i].latlng = legs[i].start_location;
         waypts[i].address = legs[i].start_address;
         waypts[i].marker = createMarker(legs[i].start_location,"waypoint"+i,legs[i].start_address,"yellow");
       }
       endLocation.latlng = legs[i].end_location;
       endLocation.address = legs[i].end_address;
       var steps = legs[i].steps;
       for (j=0;j<steps.length;j++) {
         var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);
            }
          }
        }
        detailsPanel.innerHTML += "</ul>"
        polyline.setMap(map);
        map.fitBounds(bounds);
        endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
        // == create the initial sidebar ==
        makeSidebar();
  } else alert(status);
}
The createMarker function:
function createMarker(latlng, label, html, color) {
   var contentString = '<b>'+label+'</b><br>'+html;
   var marker = new google.maps.Marker({
        position: latlng,
        draggable: true, 
        map: map,
        icon: getMarkerImage(color),
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
   });
   marker.myname = label;
   gmarkers.push(marker);

   google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
   return marker;
}
custom icon function:
function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!icons[iconColor]) {
      icons[iconColor] = {
        url: "mapIcons/marker_"+ iconColor +".png",
        // This marker is 20 pixels wide by 34 pixels tall.
        size: new google.maps.Size(20, 34),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is at 6,20.
        anchor: new google.maps.Point(9, 34));
   } 
   return icons[iconColor];
}


                        
这篇关于如何在Google Map API中替换A和B标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！