function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 37.773972,
lng: -122.431297
},
gestureHandling: "greedy",
disableDefaultUI: true
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var htmlMarker = new HTMLMarker(location.lat, location.lng);
google.maps.event.addListener(htmlMarker, 'click', function(evt) {
infoWin.setContent("Open my info window");
infoWin.open(map, htmlMarker);
});
return htmlMarker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
lat: 37.77,
lng: -122.44
},
{
lat: 37.78,
lng: -122.45
},
{
lat: 37.79,
lng: -122.42
},
{
lat: 37.72,
lng: -122.43
},
{
lat: 37.74,
lng: -122.42
},
{
lat: 37.75,
lng: -122.41
},
{
lat: 37.75,
lng: -122.43
},
{
lat: 37.79,
lng: -122.43
},
{
lat: 37.78,
lng: -122.43
}
];
function HTMLMarker(lat, lng) {
this.lat = lat;
this.lng = lng;
this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
return this.pos
};
HTMLMarker.prototype.onAdd = function() {
this.div = document.createElement('DIV');
this.div.className = "htmlMarker";
this.div.style.position = 'absolute';
this.div.innerHTML = "$500";
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
}
HTMLMarker.prototype.draw = function() {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y + 'px';
}
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.htmlMarker {
background-color: black;
border-radius: 50%;
padding: 10px;
color: white;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4a6qqpfCMP8S31X6l3IKi5BLE7g3sbY4&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id='map'></div>
我想创建一个事件,在自定义标记中打开一个信息窗口。
我正在遵循这个不错的教程http://jsfiddle.net/geocodezip/psp42y7e/2/ 和工作,我创建我的自定义标记。 但是问题是,当我尝试调用函数并以args形式传递Marker时,click事件不会触发。
如何在自定义标记中打开infoWindow?
在代码的这一部分,我尝试将infoWindow添加到我的自定义群集标记中
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var htmlMarker = new HTMLMarker(location.lat, location.lng);
google.maps.event.addListener(htmlMarker, 'click', function(evt) {
infoWin.setContent("Open my info window");
infoWin.open(map, htmlMarker);
});
return htmlMarker;
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 37.773972,
lng: -122.431297
},
gestureHandling: "greedy",
disableDefaultUI: true
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var htmlMarker = new HTMLMarker(location.lat, location.lng);
google.maps.event.addListener(htmlMarker, 'click', function(evt) {
infoWin.setContent("Open my info window");
infoWin.open(map, htmlMarker);
});
return htmlMarker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
lat: 37.77,
lng: -122.44
},
{
lat: 37.78,
lng: -122.45
},
{
lat: 37.79,
lng: -122.42
},
{
lat: 37.72,
lng: -122.43
},
{
lat: 37.74,
lng: -122.42
},
{
lat: 37.75,
lng: -122.41
},
{
lat: 37.75,
lng: -122.43
},
{
lat: 37.79,
lng: -122.43
},
{
lat: 37.78,
lng: -122.43
}
];
function HTMLMarker(lat, lng) {
this.lat = lat;
this.lng = lng;
this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
return this.pos
};
HTMLMarker.prototype.onAdd = function() {
this.div = document.createElement('DIV');
this.div.className = "htmlMarker";
this.div.style.position = 'absolute';
this.div.innerHTML = "$500";
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
}
HTMLMarker.prototype.draw = function() {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y + 'px';
}
答案 0 :(得分:1)
HTMLMarker
不能处理点击事件。要添加单击事件处理,请更改.onAdd
方法以添加单击事件侦听器,该事件将触发对象上的单击事件(并返回其位置作为事件的属性)。
HTMLMarker.prototype.onAdd = function() {
this.div = document.createElement('DIV');
this.div.className = "htmlMarker";
this.div.style.position = 'absolute';
this.div.style.cursor = 'pointer';
this.div.innerHTML = "$500";
var that = this;
this.div.addEventListener("click", function(evt) {
google.maps.event.trigger(that, 'click', {latLng: that.pos})
})
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.htmlMarker {
background-color: black;
border-radius: 50%;
padding: 10px;
color: white;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 37.773972,
lng: -122.431297
},
gestureHandling: "greedy",
disableDefaultUI: true
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var htmlMarker = new HTMLMarker(location.lat, location.lng);
google.maps.event.addListener(htmlMarker, 'click', function(evt) {
console.log("htmlMarker click@" + evt.latLng.toUrlValue(6));
infoWin.setContent("Open my info window<br>marker #" + i);
infoWin.setOptions({
pixelOffset: new google.maps.Size(20, 0)
})
infoWin.open(map, htmlMarker);
});
return htmlMarker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
lat: 37.77,
lng: -122.44
},
{
lat: 37.78,
lng: -122.45
},
{
lat: 37.79,
lng: -122.42
},
{
lat: 37.72,
lng: -122.43
},
{
lat: 37.74,
lng: -122.42
},
{
lat: 37.75,
lng: -122.41
},
{
lat: 37.75,
lng: -122.43
},
{
lat: 37.79,
lng: -122.43
},
{
lat: 37.78,
lng: -122.43
}
];
function HTMLMarker(lat, lng) {
this.lat = lat;
this.lng = lng;
this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
return this.pos
};
HTMLMarker.prototype.onAdd = function() {
this.div = document.createElement('DIV');
this.div.className = "htmlMarker";
this.div.style.position = 'absolute';
this.div.style.cursor = 'pointer';
this.div.innerHTML = "$500";
var that = this;
this.div.addEventListener("click", function(evt) {
console.log("click");
google.maps.event.trigger(that, 'click', {
latLng: that.pos
})
})
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
}
HTMLMarker.prototype.draw = function() {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y + 'px';
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>