【发布时间】：2016-08-06 18:36:55
【问题描述】：
我正在使用谷歌地图，其中：
我想在这里运行类似于“重新加载标记”操作的操作：http://jsfiddle.net/upsidown/p646xmcr/ （注意：这个特定部分与这个问题并不完全相关，我只是想提供一些上下文作为该代码确实使用了上述链接中的一些元素）
我想从一些 DOM 元素的数据属性中填充我的地图
我不想使用默认的地图标记，而是使用 HTML 标记，如下所示：Google Maps: Multiple Custom HTML Markers
我有什么：
- 小提琴：https://jsfiddle.net/yh2ucyq7/
- 标记加载正确，纬度/经度工作
我想不通
- 如何正确填充每个 HTML 标记的内部 HTML，目前它只显示用于填充地图的最后一个 DOM 元素的文本
我的 JavaScript：
// Make Plot Points From Results DOM Elements
function makeMapPlotPoints() {
// Set marker from results list and create empty plot point array
var mapPlotPointDOM = $(".listing-item");
var mapPlotPointArr = [];
$(mapPlotPointDOM).each(function() {
if($(this).data("marker-lat") !== ''){
mapPlotPointArr.push([
$(this).data("marker-id"),
$(this).data("marker-lat"),
$(this).data("marker-lng"),
]);
}
});
setMarkers(mapPlotPointArr);
};
var map;
var markers = []; // Create a marker array to hold markers
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
lat: 0,
lng: 0
};
var overlay;
function setMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
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 () {}
var mapMarkerItem = locations[i];
var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);
//init your html element here
HTMLMarker.prototype.onAdd = function () {
div = document.createElement('DIV');
div.style.position='absolute';
div.className = "htmlMarker";
div.innerHTML = mapMarkerItem[0]; // ### NOTE: This is returning the same value for all html markers
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
this.div=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 - 10 + 'px';
}
//to use it
var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2]);
htmlMarker.setMap(map);
// Set Map Bounds to Auto-center
bounds.extend(myLatLng);
map.fitBounds(bounds);
// Push marker to markers array
markers.push(htmlMarker);
// Marker Info Window / Tooltip (not working)
google.maps.event.addListener(htmlMarker, 'click', (function(htmlMarker, i) {
return function() {
infowindow.setContent(locations[i][4]);
infowindow.open(map, htmlMarker);
}
})(htmlMarker, i));
}
}
function reloadMarkers() {
// Loop through markers and set map to null for each
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
// Reset the markers array
markers = [];
// Call set markers to re-add markers
makeMapPlotPoints();
}
function initializeMap() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(0, -30),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
makeMapPlotPoints();
}
initializeMap();
【问题讨论】：
标签： jquery html google-maps dom overlay