Google 地图更改信息窗口的内容
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");
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);
}
每当我单击提交按钮时,内容应该从表单更改为 "This HTML content is being reset [...]"。当我关闭信息窗口并再次打开它时,应该仍然有消息 "This HTML content is being reset [...]".
现在正在将其设置回带有提交按钮的表单。
您存储内容的方式必须使您与单击的标记建立关联。最好的方法是直接将其存储为标记的 属性(并在 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 地图中有一堆带有信息窗口的标记。
最初我将内容设置为带有 <input type="text" ...>
和提交按钮的内容。在提交按钮的 onclick="return submitForm();"
上,我调用了一个函数,该函数应该更改它所做的信息窗口的内容。但是当我关闭信息窗口并再次打开它时,文本正在被重置。我怎样才能让它留下来?
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);
}
每当我单击提交按钮时,内容应该从表单更改为 "This HTML content is being reset [...]"。当我关闭信息窗口并再次打开它时,应该仍然有消息 "This HTML content is being reset [...]".
现在正在将其设置回带有提交按钮的表单。
您存储内容的方式必须使您与单击的标记建立关联。最好的方法是直接将其存储为标记的 属性(并在 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>