问题
I have a Google Map with filterable markers and info-boxes
containing simple information about each marker( when you click them ), but was wondering if this is possible:
When you would click
on a marker - instead of a default info-box
a big div
appears on top of the map with tabs which shows all the possible data I will provide about a marker via JSON ( images, links, pictures ).
How would you approach about implementing this functionality?
回答1:
In your loop to add markers, add something like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
... your code ...
}
})
)
In your code you need to determine the map size and put a translucent DIV over top, then show your own HTML absolutely-positioned DIV inside the map's weapping element.
回答2:
you can also change the map style when clicked in the marker.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.set('styles', markerSelectedStyles);
}
})
)
You need to create your own version of a darker map.
Maps Style Wizard
And create a style like this for instance:
var markerSelectedStyles = [ {
"stylers": [
{ "invert_lightness": true }
]}
]
来源:https://stackoverflow.com/questions/10854431/how-to-when-marker-is-clicked-dim-the-map-and-show-a-big-div-instead-of-an-in