【问题标题】:How to remove the built in markers from google maps?如何从谷歌地图中删除内置标记?
【发布时间】:2016-02-03 15:59:03
【问题描述】:

理论上,

this 是如何禁用(内置)标记:

suppressMarkers 
Type:  boolean
Suppress the rendering of markers.

还有this question,展示如何包含代码。

但是这段代码显示了我的自定义图标和谷歌图标(仍然......)

var styledMap = new google.maps.StyledMapType(styles, {name: "Son Matías Beach"}); //

var mapOptions = {
    zoom: 15,
    scrollwheel: false,
    center: new google.maps.LatLng(),
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
}

var gmap = new google.maps.Map(document.getElementById('gmap'), mapOptions);

var hotel_lat = new google.maps.LatLng( 39.514801, 2.53708 );
var aero_lat = new google.maps.LatLng(39.551741,2.736165);




var Hotel = new google.maps.Marker({
    position: hotel_lat,
    title:"Custom name",
    icon: '../www/img/logos/map-ico.png'
});
Hotel.setMap(gmap);
var Airport = new google.maps.Marker({
    position: aero_lat,
    title:"Airport",
    icon: '../www/img/airplane.png'
});
Airport.setMap(gmap);


gmap.mapTypes.set('map_style', styledMap);
gmap.setMapTypeId('map_style');

var mapInfoWindow =  new google.maps.InfoWindow();
var mapBounds = new google.maps.LatLngBounds();

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.suppressMarkers = true; /// <-- The line
directionsDisplay.setMap(gmap);
/* ruta del hotel al aeropuerto */ 
route(aero_lat , hotel_lat );
gmap.setCenter(new google.maps.LatLng( hlat, hlong ));
$(window).resize(function () {
    gmap.setCenter(new google.maps.LatLng( hlat, hlong ));
});

知道我做错了什么吗?

【问题讨论】:

  • 不知道为什么,但必须像这样传递:directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true });

标签: javascript google-maps google-maps-api-3


【解决方案1】:

这是不正确的:

directionsDisplay.suppressMarkers = true; /// <-- The line

DirectionsRenderer 没有.suppressMarkers 属性。您需要在构造函数中传递它:

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

proof of concept fiddle

代码 sn-p:

var directionsDisplay, directionsService;

function initialize() {
  var mapOptions = {
    zoom: 15,
    scrollwheel: false,
    center: new google.maps.LatLng(),
  };

  var gmap = new google.maps.Map(document.getElementById('gmap'), mapOptions);

  var hotel_lat = new google.maps.LatLng(39.514801, 2.53708);
  var aero_lat = new google.maps.LatLng(39.551741, 2.736165);

  var Hotel = new google.maps.Marker({
    position: hotel_lat,
    title: "Custom name",
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  });
  Hotel.setMap(gmap);
  var Airport = new google.maps.Marker({
    position: aero_lat,
    title: "Airport",
    icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'
  });
  Airport.setMap(gmap);


  var mapInfoWindow = new google.maps.InfoWindow();
  var mapBounds = new google.maps.LatLngBounds();

  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  directionsDisplay.setMap(gmap);
  /* ruta del hotel al aeropuerto */
  route(aero_lat, hotel_lat);
  gmap.setCenter(new google.maps.LatLng(hlat, hlong));
  $(window).resize(function() {
    gmap.setCenter(new google.maps.LatLng(hlat, hlong));
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function route(origin, destination) {
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
html,
body,
#gmap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="gmap"></div>

【讨论】:

  • 我知道。我在评论中提到过。我猜链接答案的问题不正确..谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-04-10
  • 2015-04-09
  • 2012-10-17
  • 2013-12-04
  • 2019-06-10
  • 1970-01-01
  • 2017-09-13
相关资源
最近更新 更多