지도에서 좌표를 변경하십시오.

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

대체 할 googlemap 아이콘을 다시로드하거나 새로 고침하지 않아도됩니다. Google지도 API 및 기타 블로그에서 제공하는 모든 방법을 시도했습니다. 나에게 도움이되는 것은 아무것도 없다. 누군가에게 도움이되기 위해 여기에 게시하는 것은이 부분에 도움이된다.지도에서 좌표를 변경하십시오.

내가 해결하려고하는 문제를 해결할 수 있도록 여기에 전체 코드를 복사했습니다.

출처

2016-06-23 KJ_kaka

당신은 아약스와 노력 질문 –

에 아약스 태그를 넣어야하지만 –

우리는 당신이 겪고있는 것과 비슷한 문제가있었습니다. 우리가 해결 한 방법은 경계를 다시 계산하고 새로운 위치가 추가 될 때마다지도를 다시 매입하는 것이 었습니다. 그래서 기본적으로 우리가 마지막에 코드의이 비트가있는 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

피팅지도가 아닌 그 din't 나를 도와 여기 문제. 코드를 실행하면 전체지도가 다시로드되는 좌표를 변경하려고한다는 것을 알게됩니다. 내가 원하지 않는 .. 위도와 경도를 대체 할 맵을 원한다면 다시로드하거나 새로 고침하지 않아도됩니다. –

내 코드를 실행할 수 있다면지도의 좌표가 변경되고지도가 다시로드되는 것을 볼 수 있습니다. 나는 싫어. line number 80은 var map = new google.maps.Map (document.getElementById ('map')) 맵을 다시로드하는 중입니다. ** line number 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

답변을 주셔서 감사합니다. 내 코드를 실행할 수 있다면지도의 좌표가 바뀌고 **지도가 내가 원하지 않는 ** 다시로드하는 것을 관찰 할 것입니다. 라인 번호 80은 입니다. var map = new google .maps.Map (document.getElementById ('map') 지도를로드하는 중입니다. ** line number 80에서 변경하거나 수정해야 할 필요가 있다고 느낍니다. ** –

var map = new google.maps.Map (docum var map = new google.maps.Map (document.getElementById ('map')). 무엇을 위해서? 맵을 다시 작성하면 모든 정보가 지워지고 다시로드됩니다. 원하는 경우 좌표 만 변경하려는 경우 그렇게하지 않아도됩니다. –

googlemap Dom 요소를 얻으려면 I trie 내가 느끼는 그 길은 잘못된 길이다. 그 대답을 찾고 –

지도에서 좌표를 변경하십시오.

답변

관련 문제