Google Maps更改信息窗口的内容 [英] Google Maps change content of infowindow

问题描述

我的Google地图中有一堆带有信息窗口的标记. 最初，我使用<input type="text" ...>和提交按钮将内容设置为某些内容.在提交按钮的onclick="return submitForm();"上，我调用了一个函数，该函数应该更改其信息窗口的内容.但是，当我关闭信息窗口并再次打开它时，该文本将被重置.我如何让它留下来? infowindow.setContent("This HTML content is being reset after reopening the infowindow");

I have a bunch of markers with infowindows in my google maps. Initially I set the content to something with a <input type="text" ...> and a submit button. On the onclick="return submitForm();" of the submit button I call a function which should change the content of the infowindow which it does. But when I close the infowindow and open it again, the text is being reset. How can I make it stay? infowindow.setContent("This HTML content is being reset after reopening the infowindow");

infowindow.open(map, marker);

非常感谢！

_

初始化:

function addCoordinate(lat, lon, text){
    var marker = new google.maps.Marker({
        position: (new google.maps.LatLng(lat, lon)),
        title: '#' + path.getLength(),
        map: map,
        icon: image3
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<input type="text" id="wpname" value="'+ name +'" style="width:200px"><input type="hidden" id="wplat" value="'+ lat +'"><input type="hidden" id="wplon" value="'+ lon +'"><input type="submit" value="OK" onclick="return submitForm();"><br>'+ text +'<br><a href="javascript:removeCoordinate('+lat+', '+lon+');">Remove</a>');
        infowindow.open(marker.get('map'), marker);
    });
}

要调用的功能:

function submitForm() {
    infowindow.setContent("This HTML content is being reset after reopening the infowindow");
    infowindow.open(map, marker);
}

每当我单击提交按钮时，内容应从表单更改为此HTML内容正在重置[...]".当我关闭信息窗口并再次打开它时，仍然应该显示消息此HTML内容正在重置[...]".

Whenever I click the submit button the content should change from the form to "This HTML content is being reset [...]". When I close the infowindow and open it again, there should still be the message "This HTML content is being reset [...]".

现在使用提交按钮将其设置回表单.

Right now it is being set back to the form with the submit button.

推荐答案

您必须以一种与单击的标记相关的方式存储内容.最好的方法是将其直接存储为标记的属性(并在submitForm中更新此标记属性)

You must store the content in a way that gives you a relation to the clicked marker. The best way would be to store it directly as a property of the marker(and update this marker-property in submitForm)

function initialize() {

  var goo = google.maps,
    map = new goo.Map(document.getElementById("map-canvas"), {
      center: new goo.LatLng(-34.397, 150.644),
      zoom: 8
    }),

    infowindow = new google.maps.InfoWindow;

  function addCoordinate(lat, lon, text) {
    var node = document.createElement('div'),
      marker = new goo.Marker({
        position: (new goo.LatLng(lat, lon)),

        map: map,
        content: node
      });
    node.innerHTML =
      '<input type="text" id="wpname" value="' + name + '" style="width:200px">' +
      '<input type="hidden" id="wplat" value="' + lat + '">' +
      '<input type="hidden" id="wplon" value="' + lon + '">' +
      '<input type="submit" value="OK" ><br>' + text +
      '<br><a href="#">Remove</a>';

    function submitForm() {
      marker.set('content', 'This marker has been stored');
      goo.event.trigger(marker, 'click')
    }

    function removeCoordinate() {
      marker.setMap(null);
    }

    goo.event.addDomListener(node.querySelector('input[type=submit]'), 'click', submitForm)
    goo.event.addDomListener(node.querySelector('a'), 'click', removeCoordinate)


    goo.event.addListener(marker, 'click', function() {
      infowindow.setContent(this.get('content'));
      infowindow.open(marker.get('map'), marker);
    });
  }
  goo.event.addListener(map, 'click', function(e) {
    addCoordinate(e.latLng.lat(), e.latLng.lng(), 'some text');
  });

  window['alert']('click on the map to add a marker')

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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<div id="map-canvas"></div>

这篇关于Google Maps更改信息窗口的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！