javascript - Google map api 中的其他选择 (3)

Question

使用 google map API 创建具有多个标记的 map 后，我想要进行其他选择以突出显示显示的标记子集。我想在不返回服务器的情况下执行此操作。最好我想将数据存储在标记或数组中。我可以用新的标记替换，也可以在标记上覆盖图像。任何人都可以提出如何执行此操作的示例 - 特别是有关添加图像或更改标记的部分。

下面的例子...

Answer 1

下面是一个示例，假设当您加载页面时，您会从服务器返回 JSON 格式的数据。

数据 = [{ 纬度:103.2， 经度:12.3， isDiscountOutlet: false }, { 纬度:101.2， 经度:11.3， isDiscountOutlet: false } ]

基本方法是我们将该数据存储在浏览器中，并在更改选择时使用它来更新标记的外观。

第 1 部分:创建一个全局变量来存储我们的标记

var storedMarkers;

第 2 部分:使用服务器中的数据创建 map

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(103, 11)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Add the markers. We are going to store them in a global array too,
  // so we can access them later.
  for (var i = 0; i < data.length; ++i) {

    // Create one marker for each piece of data.
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
      map: map
    });

    // Store that marker, alongside that data.
    var dataToStore = {
      markerObject: marker,
      dataAssociatedWithMarker: data[i]
    };

    storedMarkers.push(dataToStore);
}

google.maps.event.addDomListener(window, 'load', initialize);

第 3 部分:当有人单击按钮时，我们将显示所有折扣店，并隐藏所有其他标记

我假设您有一个 id 为“discount”的 DOM 元素(一个按钮)。我也会作弊并使用 jQuery :)

$("#discount").click(function () {
  for (var i = 0; i < storedMarkers.length; ++i) {
    var currentStoredMarker = storedMarkers[i];

    // Is this marker a discount outlet?
    if (currentStoredMarker.dataAssociatedWithMarker.isDiscountOutlet == true) {
      // Let's show it!
      currentStoredMarker.markerObject.setVisible(true);
    } else {
      // Let's hide it!
      currentStoredMarker.markerObject.setVisible(false);
    }
  }
});