用监听器更新谷歌地图标记图标

Question

我使用google maps API编写了一些代码。当用户点击地图上的任意位置时，它会在此处创建一个标记，并打开一个infoWindow，允许他们选择此标记是“A”类型还是“B”类型。当用户点击此InfoWindow上的“保存”时，我想要更新图标。

HTML：

<div id="form">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type='text' id='name' /> </td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><input type='text' id='address' /> </td>
    </tr>
    <tr>
      <td>Type:</td>
      <td><select id='type'> +
                  <option value='A' SELECTED>A</option>
                  <option value='B'>B</option>
          </select> 
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input type='button' value='Save' onclick='saveData()' /></td>
    </tr>
  </table>
</div>

Javascript初始化：

infowindow = new google.maps.InfoWindow({
  content: document.getElementById('form')
});

messagewindow = new google.maps.InfoWindow({
  content: document.getElementById('message')
});

google.maps.event.addListener(map, 'click', function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });


  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    document.getElementById('form').style.display = "block";
  });
});

但是我不知道要在saveData（）方法中添加什么来更新用于创建的标记的图标。这可能吗？？

function saveData() {
 marker.update.setIcon("../images/A.png);
}

谢谢。

Answer 1

一种选择是保持对添加到地图的最后一个标记的引用，并使用它来访问标记并更改其图标。

在全球范围内：

var lastmarker;

在您的点击监听器中：

google.maps.event.addListener(map, 'click', function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    lastmarker = marker;
    document.getElementById('form').style.display = "block";
  });
  google.maps.event.trigger(marker,'click');
});

在你的saveData函数中：

function saveData() {
  if (lastmarker && lastmarker.getIcon) {
    var iconUrl = "https://www.google.com/mapfiles/marker"+$("#type").val()+".png";
    lastmarker.setIcon(iconUrl);
  }
}

Proof of concept fiddle

代码段：

var lastmarker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow({
    content: document.getElementById('form')
  });

  messagewindow = new google.maps.InfoWindow({
    content: document.getElementById('message')
  });

  google.maps.event.addListener(map, 'click', function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
      lastmarker = marker;
      document.getElementById('form').style.display = "block";
    });
    google.maps.event.trigger(marker, 'click');
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function saveData() {
  if (lastmarker && lastmarker.getIcon) {
    var iconUrl = "https://www.google.com/mapfiles/marker" + $("#type").val() + ".png";
    lastmarker.setIcon(iconUrl);
  }
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#form {
  display: none;
}

<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="form">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type='text' id='name' /> </td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><input type='text' id='address' /> </td>
    </tr>
    <tr>
      <td>Type:</td>
      <td>
        <select id='type'>
          <option value='A' SELECTED>A</option>
          <option value='B'>B</option>
          <option value='C'>C</option>
          <option value='D'>D</option>
          <option value='E'>E</option>
        </select>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input type='button' value='Save' onclick='saveData()' /></td>
    </tr>
  </table>
</div>
<div id="map_canvas"></div>