我不知道为什么,当我单击google maps中的位置时,我的每个API都显示此错误,但它显示的信息很简单,但是当我单击另一个时,它会显示相同的经度和纬度,以显示其他位置的信息,例如,请参见下图:
this when i click on Wat Phnom
然后我点击皇宫
this when i click on The Royal Palace
我不知道为什么在我的Google Maps API中需要使用相同的lat和lng tov show infor或任何缺少的代码?
请帮忙...!不好意思,如果我的英语不好讲,谢谢。
function getid($e){
return document.getElementById($e);
}
function updatetext($value){
if(getid('marker-info')!==null){
getid('marker-info').innerHTML = $value.value;
}
}
var map;
var marker;
initialize();
function initialize(){
var myLatlng = new google.maps.LatLng(11.5520558,104.9233717);
var option = {
zoom: 13,
center: myLatlng,
maxZoom: 20,
minZoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true,
fullscreenControl: true,
disableDoubleClickZoom: true,
scaleControl: true,
};
map = new google.maps.Map(getid('maps'), option);
}
// Add Marker Event
google.maps.event.addListenerOnce(map, 'rightclick', function(event){
addMarker(event.latLng, '../icons/maps.png', true, true);
});
// Add Marker Function
function addMarker(latlng, icon, dragging, showinfo){
var marker = new google.maps.Marker({
position: latlng,
map:map,
draggable: dragging,
icon: icon,
animation: google.maps.Animation.DROP
});
content = '<div class="marker-form"><div class="head" id="marker-header">Subject Property</div><textarea id="marker-info">'+getid('info-text').value+'</textarea></div>'
var info = new google.maps.InfoWindow();
info.setContent(content);
if(showinfo){
info.open(map, marker);
}
// Add Click Event to Marker
google.maps.event.addListener(marker, 'click', function(){
info.open(map, marker);
});
var lat = latlng.lat();
var lng = latlng.lng();
getid('lat').innerHTML = lat;
getid('lng').innerHTML = lng;
// Add Marker Drag Event
google.maps.event.addDomListener(marker, 'drag', function(event){
var lat = event.latLng.lat();
var lng = event.latLng.lng();
getid('lat').innerHTML = lat;
getid('lng').innerHTML = lng;
});
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
body{
margin: 0;
padding: 0
}
#maps{
width: 700px;
height: 700px;
float: left;
}
.marker-form{
display: block;
width: 300px;
height: 150px;
}
.marker-form>.head{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 14px;
border: none;
width: 100%
}
.marker-form>textarea{
border: none;
width: 95%;
font-family: 'Roboto', sans-serif;
font-size: 14px;
height: 70%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maps With Single Marker</title>
<link rel="stylesheet" href="maps.css">
</head>
<body>
<div id="maps"></div>
<div id="lat">Lat</div>
<div id="lng">Lng</div>
<textarea id="info-text" onkeyup="updatetext(this);"></textarea>
<!-- Script -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script src="maps.js"></script>
</body>
</html>
最佳答案
问题是因为您对所有信息窗口都使用相同的信息窗口变量,因此每次用新标记信息窗口内容进行初始化时都会对其使用相同的变量,而旧变量将被新内容替换。
因此,您要做的就是对所有标记使用不同的信息窗口。
例如:
var cnt=0;
var infoarray=[];
function addMarker(latlng, icon, dragging, showinfo){
var marker = new google.maps.Marker({
position: latlng,
map:map,
draggable: dragging,
icon: icon,
animation: google.maps.Animation.DROP,
id=cnt
});
cnt++;
content = '<div class="marker-form"><div class="head" id="marker-header">Subject Property</div><textarea id="marker-info">'+getid('info-text').value+'</textarea></div>';
var info = new google.maps.InfoWindow();
info.setContent(content);
if(showinfo){
info.open(map, marker);
}
infoarray.push(info);
// Add Click Event to Marker
google.maps.event.addListener(marker, 'click', function(){
info[this.id].open(map, this);
});
var lat = latlng.lat();
var lng = latlng.lng();
getid('lat').innerHTML = lat;
getid('lng').innerHTML = lng;
// Add Marker Drag Event
google.maps.event.addDomListener(marker, 'drag', function(event){
var lat = event.latLng.lat();
var lng = event.latLng.lng();
getid('lat').innerHTML = lat;
getid('lng').innerHTML = lng;
});
}