理论上,
这是禁用(内置)标记的方法:
suppressMarkers
Type: boolean
Suppress the rendering of markers.
这个问题,展示了如何包含代码。
但是这段代码显示了我的自定义图标和谷歌图标(仍然......
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.suppressMarkers = true; /// <-- The line
没有 DirectionsRenderer 的 .suppressMarkers
属性。 您需要在构造函数中传递它:
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
概念验证小提琴
代码片段:
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>