这是我更新的答案。
所以我有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 –
感谢您的帮助,这实际上帮了很大的忙碌 –
看看我更新的答案 –