[英]How to make the infobox of a specific marker be opened by default after i click "show map" button ( similar to Airbnb)?
我有一张地图,上面有特定区域内所有酒店的标记,当我点击每个标记时,会显示每家酒店的信息框。 此地图在模态窗口中打开。
我希望当我在特定酒店的页面上并且用户单击“查看更大的地图”按钮时,该地图将显示为该特定酒店的信息框默认打开而无需单击该标记(例如 airbnb地图)。
我尝试使用tilesloaded或bounds_changed更改谷歌地图上的点击事件,但没有奏效。 google.maps.event.addListener(marker, 'click', (function () {...}));
我也试过
function onHtmlClick(key){
google.maps.event.trigger(markers[key], "click");
}
<a href="#" class="btn_map location_map_btn properties" data-
toggle="modal" data-target="#myModal" onclick="onHtmlClick(1)">View Larger
Map <i class="icon-location-5"></i></a>
但它没有用。
(function(A) {
if (!Array.prototype.forEach)
A.forEach = A.forEach || function(action, that) {
for (var i = 0, l = this.length; i < l; i++)
if (i in this)
action.call(that, this[i], i, this);
};
})(Array.prototype);
var
mapObject,
markers = [],
markersData = {
'Single_hotel': [
{
name: 'Villas',
location_latitude: 37.713490,
location_longitude: 20.980900,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
},
{
name: 'Villas2',
location_latitude: 37.713490,
location_longitude: 20.980900,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
}
]
};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.859490, 20.925600),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scrollwheel: false,
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
]
};
var
marker;
mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
for (var key in markersData)
markersData[key].forEach(function (item) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
map: mapObject,
icon: 'img/pins/' + key + '.png',
});
if ('undefined' === typeof markers[key])
markers[key] = [];
markers[key].push(marker);
google.maps.event.addListener(marker, 'click', (function () {
closeInfoBox();
getInfoBox(item).open(mapObject, this);
mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
}));
});
function hideAllMarkers () {
for (var key in markers)
markers[key].forEach(function (marker) {
marker.setMap(null);
});
};
function closeInfoBox() {
$('div.infoBox').remove();
};
function getInfoBox(item) {
return new InfoBox({
content:
'<div class="marker_info" id="marker_info">' +
'<img src="' + item.map_image_url + '" alt="Image"/>' +
'<h3>'+ item.name_point +'</h3>' +
'<span>'+ item.description_point +'</span>' +
'<div class="marker_tools">' +
'<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
'<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' +
'</div>' +
'<a href="'+ item.url_point + '" class="btn_infobox">Details</a>' +
'</div>',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(10, 125),
closeBoxMargin: '5px -20px 2px 2px',
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
isHidden: false,
alignBottom: true,
pane: 'floatPane',
enableEventPropagation: true
});
};
<!-- Button to Open the Modal -->
<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick(1)">View Larger Map <i class="icon-location-5"></i></a>
<!-- The Modal map-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Search By Map</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="map_modal" class="map"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End modal map -->
您的“标记数组”是一个键为“Single_villas”的对象,然后是该属性中的google.maps.Markers
数组。 要在单个标记上触发单击事件,您的onHtmlClick
函数需要类似于:
function onHtmlClick(key,key2) {
google.maps.event.trigger(markers[key][key2], "click");
}
代码片段:
(function(A) { if (!Array.prototype.forEach) A.forEach = A.forEach || function(action, that) { for (var i = 0, l = this.length; i < l; i++) if (i in this) action.call(that, this[i], i, this); }; })(Array.prototype); var mapObject, markers = [], markersData = { 'Single_hotel': [{ name: 'Villas', location_latitude: 37.713490, location_longitude: 20.980900, map_image_url: 'img/villas/280.jpg', name_point: 'Aeolos Luxury Villas 0', description_point: 'Lorem Ipsum', get_directions_start_address: '', phone: '+30 2641 085625', url_point: 'single_hotel.html' }, { name: 'Villas2', location_latitude: 37.713, location_longitude: 20.980, map_image_url: 'img/villas/280.jpg', name_point: 'Aeolos Luxury Villas 1', description_point: 'Lorem Ipsum', get_directions_start_address: '', phone: '+30 2641 085625', url_point: 'single_hotel.html' } ] }; var mapOptions = { zoom: 14, center: new google.maps.LatLng(37.859490, 20.925600), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_CENTER }, panControl: false, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_LEFT }, scrollwheel: false, scaleControl: false, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP } }; var marker; var bounds = new google.maps.LatLngBounds(); mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions); for (var key in markersData) { markersData[key].forEach(function(item) { marker = new google.maps.Marker({ position: new google.maps.LatLng(item.location_latitude, item.location_longitude), map: mapObject, // icon: 'img/pins/' + key + '.png', }); bounds.extend(marker.getPosition()); mapObject.fitBounds(bounds); if ('undefined' === typeof markers[key]) markers[key] = []; markers[key].push(marker); console.log(markers); google.maps.event.addListener(marker, 'click', (function() { closeInfoBox(); getInfoBox(item).open(mapObject, this); mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude)); })); }); } function onHtmlClick(key, key2) { google.maps.event.trigger(markers[key][key2], "click"); } function hideAllMarkers() { for (var key in markers) markers[key].forEach(function(marker) { marker.setMap(null); }); }; function closeInfoBox() { $('div.infoBox').remove(); }; function getInfoBox(item) { return new InfoBox({ content: '<div class="marker_info" id="marker_info" style="border: 1px solid black; margin-top: 8px; background: white; padding: 5px;">' + // '<img src="' + item.map_image_url + '" alt="Image"/>' + '<h3>' + item.name_point + '</h3>' + '<span>' + item.description_point + '</span>' + '<div class="marker_tools">' + '<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="' + item.get_directions_start_address + '" type="hidden"><input type="hidden" name="daddr" value="' + item.location_latitude + ',' + item.location_longitude + '"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' + '<br/><a href="tel://' + item.phone + '" class="btn_infobox_phone">' + item.phone + '</a>' + '</div>' + '<a href="' + item.url_point + '" class="btn_infobox">Details</a>' + '</div>', disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size(10, 125), closeBoxMargin: '5px -20px 2px 2px', closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", isHidden: false, alignBottom: true, pane: 'floatPane', enableEventPropagation: true }); };
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 80%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .map { height: 400px; width: 500px; } .marker_info { background }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Button to Open the Modal --> <a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',0)">View Larger Map (Single_hotel[0])<i class="icon-location-5"></i></a><br> <a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',1)">View Larger Map (Single_hotel[1])<i class="icon-location-5"></i></a> <!-- The Modal map--> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Search By Map</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div id="map_modal" class="map"></div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- End modal map --> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.