Karte auf

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD83DW4cuDAMp0Zf2GkEXGFqnBAewN5qko"></script> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <div id="map" style="width: 100%; height: 400px;"></div> 

     <script type="text/javascript"> 
      function init(locations){ 
      var element = document.getElementById("map"); 

      var mapTypeIds = []; 
      for(var type in google.maps.MapTypeId) { 
       mapTypeIds.push(google.maps.MapTypeId[type]); 
      } 
      mapTypeIds.push("OSM"); 

      var map = new google.maps.Map(element, { 
       center: new google.maps.LatLng(parseInt(locations[0].lat), parseInt(locations[0].lng)), 
           zoom: 6, 
       mapTypeId: "OSM", 
       mapTypeControlOptions: { 
       mapTypeIds: mapTypeIds 
       } 
      }); 

      var infoWindow = new google.maps.InfoWindow(), marker, i; 

      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i].lat, locations[i].lng), 
       map: map, 
       draggable:true, 
       // title: locations[i].lat 
       // icon: image 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infoWindow.setContent(locations[i].infowindow); 
        infoWindow.open(map, marker); 
       } 
       })(marker, i)); 

       var mapTypeIds = []; 
       for(var type in google.maps.MapTypeId) { 
        mapTypeIds.push(google.maps.MapTypeId[type]); 
       } 
       mapTypeIds.push("OSM"); 

       map.mapTypes.set("OSM", new google.maps.ImageMapType({ 
       getTileUrl: function(coord, zoom) { 
        return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; 
       }, 
       tileSize: new google.maps.Size(256, 256), 
       name: "OpenStreetMap", 
       maxZoom: 18 
       })); 
      } 
      } 
      // long 77.4028193 lat 23.2243851 
      var locations = [{"lat":"21.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"17.433282","lng":"78.426762","infowindow":" information2 "}]; 
      var locations1 = [{"lat":"24.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"17.434282","lng":"78.426762","infowindow":" information2 "}]; 


      window.onload = init(locations); 
      window.setInterval(function(){console.log("first fn");change(locations1);}, 3500); 
      window.setInterval(function(){console.log("second fn");change(locations);}, 1500); 
      function change(locations){ 
      console.log(locations); 

      var mapTypeIds = []; 
      for(var type in google.maps.MapTypeId) { 
       mapTypeIds.push(google.maps.MapTypeId[type]); 
      } 
      mapTypeIds.push("OSM"); 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 6, 
       center: {lat: parseInt(locations[0].lat), lng: parseInt(locations[0].lng)}, 
       mapTypeId: "OSM", 
       mapTypeControlOptions: { 
       mapTypeIds: mapTypeIds 
       } 
      }); 

      // var map = google.maps.Map(document.getElementById("map")); 
      var infoWindow = new google.maps.InfoWindow(), marker, i; 
      for (i = 0; i < locations.length; i++) { 

       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i].lat, locations[i].lng), 
       }); 
       marker.setMap(map); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infoWindow.setContent(locations[i].infowindow); 
        infoWindow.open(map, marker); 
       } 
       })(marker, i)); 
       var mapTypeIds = []; 
       for(var type in google.maps.MapTypeId) { 
       mapTypeIds.push(google.maps.MapTypeId[type]); 
       } 
       mapTypeIds.push("OSM"); 

       map.mapTypes.set("OSM", new google.maps.ImageMapType({ 
       getTileUrl: function(coord, zoom) { 
        return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; 
       }, 
       tileSize: new google.maps.Size(256, 256), 
       name: "OpenStreetMap", 
       maxZoom: 18 
       })); 
      } 
      } 

     </script> 
    </body> 
</html>

ändern, ohne googlemap-Markierungen neu laden/aktualisieren zu müssen. Versucht alle Möglichkeiten von Google-Map API und anderen Blogs zur Verfügung gestellt. nichts hilft mir, attast posting hier hoffend jemand hilft mir mit diesem Teil.Karte auf

Ich habe den vollständigen Code hier kopiert, so dass es hilft, auf das Problem zu kommen, auf dem ich versuche zu lösen.

Quelle

2016-06-23 KJ_kaka

sollten Sie einen Ajax-Tag in Ihrer Frage –

versucht, mit Ajax setzen, aber das din't mir helfen –

Wir hatten ein ähnliches Problem wie bei Ihnen. Die Art, wie wir es gelöst haben, bestand darin, die Grenzen neu zu berechnen und die Karte jedes Mal neu zu zentrieren, wenn ein neuer Ort hinzugefügt wurde. Also im Grunde haben wir eine Funktion create, die dieses Stück Code am Ende hat:

const map_center = bounds.getCenter(); 
     resultsMap.setCenter(map_center); 
     resultsMap.panToBounds(bounds); 
     resultsMap.fitBounds(bounds);

Wo bounds hier ist Ihre Karte Grenzen, die mit dem google.maps.LatLngBounds() Verfahren gefunden werden kann.

EDIT: Ich sehe, Sie wollen es tun, ohne die Karte zu aktualisieren, ich glaube nicht, das Zurücksetzen der Grenzen die Karte aktualisiert, aber ich könnte mich irren.

Quelle

2016-06-23 18:46:35

Fitting Karte nicht ist das Problem hier. Wenn Sie den Code ausführen, werden Sie verstehen, dass ich versuche, die Koordinaten zu ändern, mit denen die ganze Karte neu geladen wird. was ich nicht will .. Ich möchte nur Karte Breiten- und Längenkoordinaten ersetzen, ohne reload/refreshing googlemap –

Wenn Sie meinen Code ausführen können Sie beobachten, dass Koordinaten auf der Karte geändert und Karte wird neu geladen was ich nicht will. Zeile Nummer 80, die ist var map = neue google.maps.Map (document.getElementById ('map') die Map neu lädt. ** Ich fühle etwas, das ich ändern oder ändern müssen an der Zeile 80 ** –

Hier mache ich.Ist das richtig. Ich habe etwas von deinem Code geändert, um sicherzustellen, dass dies das ist, was du willst. Ich denke du verpasst nur ein paar Details. Wenn Sie das möchten, lassen Sie es mich wissen. PS: Viele forloop in der Funktion ändern -> keine gute example.XD

<script type="text/javascript"> 
var map; 
var markersArray=[];//put all markers into this 
     function init(locations){ 
     var element = document.getElementById("map"); 

     var mapTypeIds = []; 
     for(var type in google.maps.MapTypeId) { 
      mapTypeIds.push(google.maps.MapTypeId[type]); 
     } 
     mapTypeIds.push("OSM"); 

     map = new google.maps.Map(element, { 
      center: new google.maps.LatLng(parseInt(locations[0].lat), parseInt(locations[0].lng)), 
          zoom: 6, 
      mapTypeId: "OSM", 
      mapTypeControlOptions: { 
      mapTypeIds: mapTypeIds 
      } 
     }); 

     var infoWindow = new google.maps.InfoWindow(), marker, i; 

     for (i = 0; i < locations.length; i++) {    
      var mapTypeIds = []; 
      for(var type in google.maps.MapTypeId) { 
       mapTypeIds.push(google.maps.MapTypeId[type]); 
      } 
      mapTypeIds.push("OSM"); 

      map.mapTypes.set("OSM", new google.maps.ImageMapType({ 
      getTileUrl: function(coord, zoom) { 
       return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; 
      }, 
      tileSize: new google.maps.Size(256, 256), 
      name: "OpenStreetMap", 
      maxZoom: 18 
      })); 
     } 
     } 

     var locations = [{"lat":"21.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"20.433282","lng":"78.426762","infowindow":" information2 "}]; 
     var locations1 = [{"lat":"24.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"22.434282","lng":"78.426762","infowindow":" information2 "}]; 

     var counter=0; 
     window.onload = init(locations); 
     window.setInterval(function(){ 
     if(counter%2==0) 
     { 
     change(locations1); 
     } 
     else 
     { 
     change(locations); 
     } 
     counter++; 
    }, 2000); 


     function change(locations){ 

      for (i = 0; i < locations.length; i++) 
      { 
      if(markersArray[i]!=null) 
      { 
       markersArray[i].setMap(null); 
       if (i == locations.length - 1) { 
        markersArray = []; 
       } 
      } 
      } 

      for (i = 0; i < locations.length; i++) 
      {  
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i].lat, locations[i].lng) }); 
      markersArray.push(marker);  

      } 
      for (i = 0; i < markersArray.length; i++) 
     { 
       markersArray[i].setMap(map); 
     } 

     } 

    </script>

Quelle

2016-06-24 02:04:54

Danke für die Antwort, wenn Sie meinen Code ausführen können, werden Sie feststellen, dass die Koordinaten auf der Karte geändert werden und die Karte neu geladen wird, was ich nicht will. Linie Nummer 80, die ist var map = new google .maps.Map (document.getElementById ('map') die Karte wird geladen. ** Ich fühle etwas, das ich ändern oder ändern muss unter der Nummer 80 ** –

var map = new google.maps.Map (docum var map = new google.maps.Map (document.getElementById ('map') ent.getElementById ('map') -> Für was? Sie erstellen die Karte neu, so dass alles gelöscht und neu geladen wird. Was sind Ergebnisse? Wenn Sie nur die Koordinate ändern möchten, müssen Sie dies nicht tun .. –

Um Google Map Dom Element zu erhalten, trie d so, was ich falsch finde. Suche nach dieser Antwort –

Antwort

Verwandte Themen