如何使用来自 DOM 元素的数据属性使用 HTML 标记（覆盖）填充 Google 地图

Question

我正在制作 google 地图，其中：

我想运行类似于这里的 'reload markers' 操作：http://jsfiddle.net/upsidown/p646xmcr/ （注意：这个特定部分并不完全与这个问题相关，我只想提供一些上下文，因为代码确实使用了上述 link)
我想从某些 DOM 元素的数据属性填充我的地图
我不想使用默认地图标记，而是想使用 HTML 标记，如下所示：

我有：

A fiddle: https://jsfiddle.net/yh2ucyq7/
标记加载正确，lat/lng 有效

我想不通的事

如何让每个 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();

Answer 1

mapMarkerItem[0] 总是相同的（正如您发现的那样）。

div.innerHTML = mapMarkerItem[0];

您需要将唯一值传递给 HtmlMarker 的构造函数。

function HTMLMarker(lat, lng, text) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
  this.text = text;
}
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
  this.div = div;
}

proof of concept fiddle

代码片段：

function HTMLMarker(lat, lng, text) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
  this.text = text;
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}

//init your html element here
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  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';
}

// 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++) {

    var mapMarkerItem = locations[i];
    var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

    //to use it
    var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2], mapMarkerItem[0]);
    htmlMarker.setMap(map);


    // Set Map Bounds to Auto-center
    bounds.extend(myLatLng);
    map.fitBounds(bounds);

    // Push marker to markers array
    //markers.push(marker);
    markers.push(htmlMarker);
  }
}

function initializeMap() {

  var mapOptions = {
    zoom: 2,
    maxZoom: 18,
    minZoom: 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();

#listings,
.results-map-wrapper {
  width: 50%;
  float: left;
}
#map-canvas {
  width: 100%;
  height: 400px;
}
.htmlMarker {
  background: #f00000;
  color: #ffffff;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="listings">
  <div class="listing-item" data-marker-id="01" data-marker-lng="0" data-marker-lat="0">
    Marker 01
  </div>
  <div class="listing-item" data-marker-id="02" data-marker-lng="0" data-marker-lat="-2">
    Marker 02
  </div>
  <div class="listing-item" data-marker-id="03" data-marker-lng="0" data-marker-lat="-4">
    Marker 03
  </div>
  <div class="listing-item" data-marker-id="04" data-marker-lng="0" data-marker-lat="2">
    Marker 04
  </div>
  <div class="listing-item" data-marker-id="05" data-marker-lng="0" data-marker-lat="4">
    Marker 05
  </div>
</div>

<div class="results-map-wrapper">
  <div id="map-canvas"></div>
</div>

如何使用来自 DOM 元素的数据属性使用 HTML 标记（覆盖）填充 Google 地图

How to Populate a Google Map with HTML markers (Overlay) using data attributes from DOM elements

html

jquery

dom

google-maps

overlay