這是我更新的答案。
所以我有5個火車站的標記。這些也是地圖上的默認標記。如果您點擊默認標記,腳本將會看到標記是否接近自定義標記。如果是,則默認的infoWindow將被關閉,而自定義的infoWindow將會出現。
因此,請嘗試點擊任何默認標記,沒有什麼不尋常的事情發生。 現在點擊自定義標記下的默認(藍色列車圖標)站標誌之一,看看會發生什麼
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
// DATA
var stationsData =[
{"name": "South", "position": [50.83644109999999,4.334787799999958], "content": "Brussels South Station"},
{"name": "Chapelle", "position": [50.84125179999999,4.348515700000007], "content": "Brussels Chapelle Station"},
{"name": "Central", "position": [50.8454658,4.3571134999999686], "content": "Brussels Central Station"},
{"name": "Congres", "position": [50.85212929999999,4.361864999999966], "content": "Brussels Congres Station"},
{"name": "North", "position": [50.8605262,4.36178730000006], "content": "Brussels North Station"}
];
var stationsMarkers = [];
var infowindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50.846624929308994,4.352617979049667), // Brussels
zoom: 14
});
// add the markers
for(var i in stationsData) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stationsData[i].position[0], stationsData[i].position[1]),
title: stationsData[i].name,
map: map
});
// store this object in stationsMarkers
stationsMarkers.push(marker);
// add a click event
google.maps.event.addListener(marker, 'click', function (e) {
// first we need to know whitch marker got clicked on
var index = stationsMarkers.indexOf(this);
setInfoWindow(index);
});
}
initDetectClick(function(position, parentOfInfowindow) {
console.log(position.lat() +','+ position.lng());
if(parentOfInfowindow) {
// We will search if this position is close to one of our markers. Let's say within 20 meter
// notice: we need &libraries=geometry in the script url, see below
for(var i in stationsMarkers) {
var distance = google.maps.geometry.spherical.computeDistanceBetween (position, stationsMarkers[i].getPosition());
if(distance < 20) {
// open the correct infoWindow
setInfoWindow(i);
// we will induce a click on the close button of the default infowindow
// This way the infowindow is visible a few milliseconds, then disappears, every click on a POI
parentOfInfowindow.find('div>img').click();
break;
}
}
}
});
}
function setInfoWindow(index) {
// if needed, close the previous infoWindow
if(infowindow) {
infowindow.setMap(null);
}
// create the infoWindow
infowindow = new google.maps.InfoWindow({
content: stationsData[index].content,
position: new google.maps.LatLng(stationsData[index].position[0], stationsData[index].position[1]),
map: map
});
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=geometry" async defer></script>
<script>
var parentOfInfowindow;
var POI_hidden = false;
function initDetectClick(callback) {
//https://stackoverflow.com/questions/8902829/disable-click-behavior-of-poi-markers-in-google-maps-v3-6
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function() {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListener(this, 'map_changed', function (e) { // Once
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// //the infoWindow will be opened, usually after a click on a POI
//trigger the click
var removeInfoWindow = null;
var self = this;
// let's limit our
//console.log(jj);
if(POI_hidden) {
callback(self.getPosition());
}
else {
removeInfoWindow = setInterval(function() {
if($('.gm-style-iw').parent().length) {
//console.log('clicked on POI @ ' + self.getPosition().lat() +''+ self.getPosition().lng()); // +e.latLng.toString()
parentOfInfowindow = $('.gm-style-iw').parent();
clearInterval(removeInfoWindow);
// now we call the callback
callback(self.getPosition(), parentOfInfowindow);
};
}, 5);
}
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
//console.log('clicked on map @'+e.latLng.toString());
callback(e.latLng);
});
}
</script>
</body>
</html>
編輯:原來的答案
我那種需要這個自己。
我結合屯林周四的腳本,如下所示:Disable click behavior of POI markers in Google Maps JS API
我把它放在一個功能,改變了一些東西......
所以,用這種回調(第27行開始)您可以檢測地圖上或點(興趣點)上的點擊次數。
然後,您可以看到,如果任何標記接近該位置,在給定的回調,......它變得有點晚了,我來完成這個
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50.846624929308994,4.352617979049667), // Brussels
zoom: 14
});
initDetectClick(function(position, parentOfInfowindow) {
console.log(position.lat() +','+ position.lng());
if(parentOfInfowindow) {
// two choises. just comment out the solution you don't want.
// we will hide the infowindow, once and for all
// but then you will not detect further clicks on the POI
//parentOfInfowindow.hide();
// we will induce a click on the close button of the infowindow
// This way the infowindow is visible a few milliseconds, then disappears, every click on a POI
parentOfInfowindow.find('div>img').click();
}
});
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<script>
var parentOfInfowindow;
var POI_hidden = false;
function initDetectClick(callback) {
//https://stackoverflow.com/questions/8902829/disable-click-behavior-of-poi-markers-in-google-maps-v3-6
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function() {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListener(this, 'map_changed', function (e) { // Once
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// //the infoWindow will be opened, usually after a click on a POI
//trigger the click
var removeInfoWindow = null;
var self = this;
// let's limit our
//console.log(jj);
if(POI_hidden) {
callback(self.getPosition());
}
else {
removeInfoWindow = setInterval(function() {
if($('.gm-style-iw').parent().length) {
// POI_hidden = true;
//alert($('.gm-style-iw').parent().length);
//console.log('clicked on POI @ ' + self.getPosition().lat() +''+ self.getPosition().lng()); // +e.latLng.toString()
parentOfInfowindow = $('.gm-style-iw').parent();
//$('.gm-style-iw').parent().hide();
//$('.gm-style-iw').parent().find('div>img').click();
clearInterval(removeInfoWindow);
// now we call the callback
callback(self.getPosition(), parentOfInfowindow);
};
}, 5);
}
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
//alert('clicked @'+e.latLng.toString())
//console.log('clicked on map @'+e.latLng.toString());
//infowindow.setMap(null);
callback(e.latLng);
});
}
</script>
</body>
</html>
它看起來並不容易解決。這是大約相同的問題。看看評論中的鏈接是否有助於http:// stackoverflow。com/questions/16417600/how-can-i-capture-the-click-event-when-a-default-marker-place-is-go-goog –
感謝您的幫助,這實際上幫了很大的忙碌 –
看看我更新的答案 –