地図上の座標を変更してください

<!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>

Googleマップマーカーを再読み込み/更新する必要はありません。 GoogleマップのAPIやその他のブログで提供されるすべての方法を試してみました。私を助けてくれるものはありません。地図上の座標を変更してください

完全なコードをここにコピーして、解決しようとしている問題を解決するのに役立ちます。

出典

2016-06-23 KJ_kaka

あなたは、あなたの質問 –

にAJAXタグを置くべきは、Ajaxを試してみましたが、そのdin't私を助けて –

私たちはあなたが経験しているのと同様の問題を抱えていました。私たちが解決したのは、境界を再計算し、新しい場所が追加されるたびに地図を再入力することでした。だから、基本的に私たちが最後にこのコードのビットを持っているcreateMarker機能を持っている：boundsはここgoogle.maps.LatLngBounds()方法を見つけることができるあなたのマップの境界、ある

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

。

編集：地図を更新せずにやりたいと思うのですが、境界線をリセットすると地図が更新されるとは思われませんが、間違っている可能性があります。

出典

2016-06-23 18:46:35

フィッティングマップではありませんここの問題。コードを実行すると、マップ全体が再ロードされている座標を変更しようとしていることがわかります。 Googleマップを再ロード/リフレッシュせずに緯度と経度の座標を置き換えるだけの場合googlemap –

私のコードを実行できる場合は、地図上の座標が変更され、地図が再読み込みされていることがわかります私は望んでいない。 line number 80はvar map = new google.maps.Map（document.getElementById（ 'map'））マップをリロードしています。**私は変更する必要があるか、行番号80で変更する必要があると感じます** –

ここにあります。この権利はありますか。私はあなたのコードのいくつかを修正して、これをあなたが望むものにするかどうかを確認しました。私はあなたがちょっとした細部を欠場すると思う。これがあなたが望むものなら、私に知らせてください。 PS：機能変更でforloopの多く - >良くない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>

出典

2016-06-24 02:04:54

あなたのコードを実行することができれば、マップ上の座標が変化し、**地図が再ロードされていることがわかります。** line number 80 is var map = new google .maps.Map（document.getElementById（ 'map'）地図をロードしています。**変更する必要がある、または行番号80で変更する必要があると感じています。** –

var map = new google.maps.Map（documあなたがマップを再作成すると、すべてのものがクリアされ、リロードされます。結果は何ですか？（つまり、あなたは何をしているのでしょうか？）var map = new google.maps.Map（document.getElementById（ 'map'）あなたが座標を変更したいだけなら、そうする必要はありません。 –

googlemap Dom要素を取得するにはI trie私が感じるその方法は間違った方法です。その答えを探してください –

地図上の座標を変更してください

答えて

関連する問題