2016-06-04 4 views
0

Ich weiß nicht warum, jede meine API erhalten diesen Fehler, wenn ich auf den Ort in Google Maps es Informationen wie einfach klicken, aber wenn ich auf einem anderen klicken, erhalten sie die gleiche lat und lng Informationen von einem anderen Ort zu zeigen, zum Beispiel sehen sie bitte das Bild unten:Infowindow zeigen an der gleichen Stelle jedes Mal, wenn ich auf den Standort Punkt in Google Maps api

this when i click on Wat Phnom

und klicken sie dann auf i auf The Royal Palace

this when i click on The Royal Palace

ich weiß nicht, warum es die gleichen lat und lng tv show infor in meiner Google Maps API oder fehlenden Code?

Bitte helfen Sie ...! und entschuldige mich, wenn mein Englisch nicht gut zu erklären ist, danke für den Fortschritt.

function getid($e){ 
 
\t return document.getElementById($e); 
 
} 
 

 
function updatetext($value){ 
 
\t if(getid('marker-info')!==null){ 
 
\t \t getid('marker-info').innerHTML = $value.value; 
 
\t } 
 
} 
 

 
var map; 
 
var marker; 
 

 
initialize(); 
 

 
function initialize(){ 
 
\t var myLatlng = new google.maps.LatLng(11.5520558,104.9233717); 
 
\t var option = { 
 
\t \t \t \t \t zoom: 13, 
 
\t \t \t \t \t center: myLatlng, 
 
\t \t \t \t \t maxZoom: 20, 
 
\t \t \t \t \t minZoom: 8, 
 
\t \t \t \t \t mapTypeId: google.maps.MapTypeId.HYBRID, 
 
\t \t \t \t \t scrollwheel: true, 
 
\t \t \t \t \t fullscreenControl: true, 
 
\t \t \t \t \t disableDoubleClickZoom: true, 
 
\t \t \t \t \t scaleControl: true, 
 
\t }; 
 

 
\t map = new google.maps.Map(getid('maps'), option); 
 
} 
 

 
// Add Marker Event 
 
google.maps.event.addListenerOnce(map, 'rightclick', function(event){ 
 
\t addMarker(event.latLng, '../icons/maps.png', true, true); 
 
}); 
 

 
// Add Marker Function 
 
function addMarker(latlng, icon, dragging, showinfo){ 
 
\t var marker = new google.maps.Marker({ 
 
\t \t position: latlng, 
 
\t \t map:map, 
 
\t \t draggable: dragging, 
 
\t \t icon: icon, 
 
\t \t animation: google.maps.Animation.DROP 
 
\t }); 
 

 
\t 
 

 
\t content = '<div class="marker-form"><div class="head" id="marker-header">Subject Property</div><textarea id="marker-info">'+getid('info-text').value+'</textarea></div>' 
 
\t var info = new google.maps.InfoWindow(); 
 
\t info.setContent(content); 
 
\t if(showinfo){ 
 
\t \t info.open(map, marker); 
 
\t } 
 

 
\t // Add Click Event to Marker 
 
\t google.maps.event.addListener(marker, 'click', function(){ 
 
\t \t info.open(map, marker); 
 
\t }); 
 

 
\t var lat = latlng.lat(); 
 
    var lng = latlng.lng(); 
 

 
\t getid('lat').innerHTML = lat; 
 
\t getid('lng').innerHTML = lng; 
 

 
\t // Add Marker Drag Event 
 
\t google.maps.event.addDomListener(marker, 'drag', function(event){ 
 
\t \t var lat = event.latLng.lat(); 
 
\t  var lng = event.latLng.lng(); 
 

 
\t \t getid('lat').innerHTML = lat; 
 
\t \t getid('lng').innerHTML = lng; 
 
\t }); 
 
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500); 
 

 
body{ 
 
\t margin: 0; 
 
\t padding: 0 
 
} 
 

 
#maps{ 
 
\t width: 700px; 
 
\t height: 700px; 
 
\t float: left; 
 
} 
 

 
.marker-form{ 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 150px; 
 
} 
 

 
.marker-form>.head{ 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-weight: 500; 
 
\t font-size: 14px; 
 
\t border: none; 
 
\t width: 100% 
 
} 
 

 
.marker-form>textarea{ 
 
\t border: none; 
 
\t width: 95%; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-size: 14px; 
 
\t height: 70% 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Maps With Single Marker</title> 
 
\t <link rel="stylesheet" href="maps.css"> 
 
</head> 
 
<body> 
 
\t <div id="maps"></div> 
 
\t <div id="lat">Lat</div> 
 
\t <div id="lng">Lng</div> 
 

 
\t <textarea id="info-text" onkeyup="updatetext(this);"></textarea> 
 
\t 
 
<!-- 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> \t 
 
</body> 
 
</html>

+1

Sie uns benötigen, den Code zu erhalten. – Laurel

Antwort

1

das Problem ist, weil Sie das das gleiche Infofenster Variable für alle Infofenster verwenden es mit neuem Marker Infofenster Inhalt und alten jedes Mal initialisiert werden mit neuen Inhalten ersetzt. alles, was Sie tun müssen, ist die verschiedenen Infofenster für alle Marker zu verwenden.

Beispiel:

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

Woher kommt diese ID = cn? meinst du id = cnt? #Dhaval Purohit –

+0

yup, dass es tut mir leid. –

+0

Sorry es hat immer noch das selbe Problem. Und ich denke, dass Ihr Code für Array-Marker gesetzt ist. Aber diese Maps, ich habe nur einen Marker gesetzt. Kann ich dein Snippet sehen? Und Entschuldigung für die in letzter Zeit antworten. :) –

Verwandte Themen