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

【问题标题】：Update google maps marker icon with listener用监听器更新谷歌地图标记图标
【发布时间】：2019-02-09 09:26:13
【问题描述】：

我使用谷歌地图 API 编写了一些代码。当用户单击地图上的任何位置时，它会在该位置创建一个标记，并打开一个信息窗口，允许他们选择此标记是类型“A”还是类型“B”。我希望在用户单击此信息窗口上的“保存”时更新图标。

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);
}

谢谢。

【问题讨论】：

stackoverflow.com/questions/23949867/…
marker.update 那是什么？ marker.setIcon(...) 应该可以工作。您的代码不完整。您在哪里定义 marker 变量？你的saveData 函数在哪里？等等。如果您需要更多帮助，请在您的问题中添加Minimal, Complete, and Verifiable example。
@MrUpsidown 标记变量在监听器定义中定义。
不，不是……

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案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

代码 sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

【讨论】：