Google地图API v3方向的自定义图标 [英] Custom icon for Google map API v3 directions

问题描述

我知道如何更换标准谷歌地图api v3上的图标。
有什么方法可以在地图上改变图标吗？

 < script type =text / javascript > 
 var directionDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
函数initialize（）{
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 var mapOptions = {
 center：new google.maps.LatLng（-34.397,150.644），
 zoom：11，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 directionsDisplay.setMap（map）; 
 directionsDisplay.setPanel（document.getElementById（directionsPanel）
）; 
 
 var marker = new google.maps.Marker（{
 position：map.getCenter（），
 map：map，
 icon：'marker / image。 png'，
 title：'Click to zoom'
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 map.setZoom（15）; 
 map.setCenter（marker.getPosition（） ）; 
}）; 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
 
函数calcRoute（）{
 var start = document.getElementById（start）。value; 
 var end ='-34.397，150.644'; 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
< / script> 
  

上面的代码显示带有我自定义图标标记的地图，但是当我生成方向而不是自定义标记我看到另一个标有绿色制造商的字母B。

div>

您需要做的是使用，这将阻止它添加任何标记。

带自定义图标的示例，根本不使用DirectionsRenderer，它是在该选项可用之前。

I know how to change icon on standard google map api v3. Is there any way to change icons on map with directions?

<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize(){
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions={
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById("directionsPanel")
    );

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: 'marker/image.png',
      title: 'Click to zoom'
    });

    google.maps.event.addListener(marker, 'click', function(){
      map.setZoom(15);
      map.setCenter(marker.getPosition());
    });

    google.maps.event.addDomListener(window, 'load', initialize);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = '-34.397, 150.644';
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>

Above code display map with my custom icon marker but when I generate directions than on top of my custom marker I see another standard green maker with letter B.

How to overide that?

解决方案

What you need to do is use the suppressMarkers option of the DirectionsRenderer, that will prevent it from adding any markers.

Example with custom icons, that doesn't use the DirectionsRenderer at all, it is from before that option was available.

这篇关于Google地图API v3方向的自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！