从DOM Elements Array设置Google Map Marker积分

Question

我正在尝试使用数据属性从某些DOM项目制作Google Map。我正在使用jQuery从这些数据属性中创建一个数组，然而我可以制作数组，但是我将这个数组作为变量传递到我的Google Map中时遇到了麻烦。

这是一个小提琴：https://jsfiddle.net/ozouat33/

我的HTML：

<div id="map-canvas"></div>
<hr>
<button id="reloadMarkers">Reload Markers</button>
<hr>
<div class="listing-item" data-marker-id="1" data-marker-title="Location 1" data-marker-lat="41.8333925" data-marker-lng="-88.0123393">
  <div class="map-infowindow-html">
  Location 1 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="2" data-marker-title="Location 2" data-marker-lat="41.8333925" data-marker-lng="-88.0133393">
  <div class="map-infowindow-html">
  Location 2 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="3" data-marker-title="Location 3" data-marker-lat="41.8333925" data-marker-lng="-88.0143393">
  <div class="map-infowindow-html">
  Location 3 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="4" data-marker-title="Location 4" data-marker-lat="41.8333925" data-marker-lng="-88.0153393">
  <div class="map-infowindow-html">
  Location 4 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="5" data-marker-title="Location 5" data-marker-lat="41.8333925" data-marker-lng="-88.0163393">
  <div class="map-infowindow-html">
  Location 5 <a href="#/some-uri">Go</a>
  </div>
</div>

我的JavaScript：

// Make Plot Array. Format is Title, Latitude, Longitude, ID, Tooltip HTML

// This is the function that I'm using to create a two-dimensional array based on my listed DOM items. The console log shows the array  correctly, but 
function makeMapPlotPoints() {

    // Set marker from results list and empty plot point array
    var mapPlotPointDOM = $( ".listing-item" );
    var mapPlotPointArr = [];

    $(mapPlotPointDOM).each(function(){ 
        mapPlotPointArr.push([
            $(this).data( "marker-title" ), 
            $(this).data( "marker-lat" ),
            $(this).data( "marker-lng" ),
            $(this).data( "marker-id" ),
            $(this).find('map-infowindow-html').html(),
        ]); 
    });
    console.log(mapPlotPointArr);
}

var map;
var markers = []; // Create a marker array to hold markers

// This is the static array that I'm using to create the map
var mapMarkers = [
    ['Location 1', 41.8333925, -88.0123393, 1],
    ['Location 2', 41.8333925, -88.0133393, 2],
    ['Location 3', 41.8333925, -88.0143393, 3],
    ['Location 4', 41.8333925, -88.0153393, 4],
    ['Location 5', 41.8333925, -88.0163393, 5]
];

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow(); 
var center = {lat: 41.8333925, lng: -88.0123393}; // need to figure out how to get dynamically

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]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: mapMarkerItem[0],
            zIndex: mapMarkerItem[3]
        });

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

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

        // Marker Info Window?tooltip
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
        })(marker, 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
    setMarkers(mapMarkers);
}

function initialize() {

    var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(41.8333925, -88.0123393),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl:true,
        scaleControl:true,
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(mapMarkers);

    // Bind event listener on button to reload markers
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

基本上，我希望我的地图使用由'makeMapPlotPoints（）'创建的数组中设置的位置，而不是变量'mapMarkers'中的数组。

附加说明：对于HTML标记，请参阅：https://jsfiddle.net/yh2ucyq7/3/

Answer 1

1. 你需要包含JQuery（至少在你的小提琴中）。
2. 您需要调用该函数来生成数组。
3. 您需要将生成的数组传递给setMarkers函数。

当我这样做时，它可以工作（从DOM中的元素中读取标记）：updated jsfiddle

代码段

// ** This is the function that I'm using to create a two-dimensional array based on my listed DOM items. The console log shows the array correctly, but I have no idea how to pass this array as a variable into the Google Map ** 
function makeMapPlotPoints() {

  // Set marker from results list and create empty plot point array
  var mapPlotPointDOM = $(".listing-item");
  var mapPlotPointArr = [];

  $(mapPlotPointDOM).each(function() {
    mapPlotPointArr.push([
      $(this).data("marker-title"),
      $(this).data("marker-lat"),
      $(this).data("marker-lng"),
      $(this).data("marker-id"),
      $(this).find('map-infowindow-html').html(),
    ]);
  });
  console.log(mapPlotPointArr);
  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: 41.8333925,
  lng: -88.0123393
}; // need to figure out how to get dynamically

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]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      animation: google.maps.Animation.DROP,
      title: mapMarkerItem[0],
      zIndex: mapMarkerItem[3]
    });

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

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

    // Marker Info Window?tooltip
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, 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 initialize() {

  var mapOptions = {
    zoom: 9,
    center: new google.maps.LatLng(41.8333925, -88.0123393),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scaleControl: true,
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  makeMapPlotPoints();
  // setMarkers(mapMarkers);


  // Bind event listener on button to reload markers
  document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

#map-canvas {
  height: 200px;
  width: 100%;
}

<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?libraries=places"></script>
<div id="map-canvas"></div>
<hr>
<button id="reloadMarkers">Reload Markers</button>
<hr>
<div class="listing-item" data-marker-id="1" data-marker-title="Location 1" data-marker-lat="41.8333925" data-marker-lng="-88.0123393">
  <div class="map-infowindow-html">
    Location 1 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="2" data-marker-title="Location 2" data-marker-lat="41.8334" data-marker-lng="-88.0133393">
  <div class="map-infowindow-html">
    Location 2 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="3" data-marker-title="Location 3" data-marker-lat="41.8335" data-marker-lng="-88.0143393">
  <div class="map-infowindow-html">
    Location 3 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="4" data-marker-title="Location 4" data-marker-lat="41.8336" data-marker-lng="-88.0153393">
  <div class="map-infowindow-html">
    Location 4 <a href="#/some-uri">Go</a>
  </div>
</div>
<div class="listing-item" data-marker-id="5" data-marker-title="Location 5" data-marker-lat="41.8337" data-marker-lng="-88.0163393">
  <div class="map-infowindow-html">
    Location 5 <a href="#/some-uri">Go</a>
  </div>
</div>