更改地图上的坐标答案

【问题标题】：Change co-ordinate on map更改地图上的坐标
【发布时间】：2016-10-26 04:46:26
【问题描述】：

<!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-map api和其他博客提供的所有方法。没有什么帮助我，最后在这里发帖希望有人能帮助我完成这部分。

我在这里复制了完整的代码，以便帮助解决我要解决的问题。

【问题讨论】：

你应该在你的问题中添加一个 ajax 标签
用 ajax 试过，但对我没有帮助

标签： javascript google-maps google-maps-api-3 maps google-maps-markers

【解决方案1】：

我来了。对吗。我修改了您的一些代码以确保这是否符合您的要求。我想你只是错过了一些细节。如果这是你想要的，请告诉我。 PS：函数变化中forloop很多-->不是很好的例子。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>

【讨论】：

感谢您的回答。如果您可以运行我的代码，您将观察到地图上的坐标发生变化并且 map is reloading which I didn't want 。第 80 行，即 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') ent.getElementById('map') -->为了什么? 你重新创建地图，所以它会清除所有内容并重新加载。你想要什么结果？如果你只是想改变坐标，你不必这样做。
为了获取 googlemap Dom 元素，我尝试了那种我觉得是错误的方式。寻找答案
那么你要做的就是改变标记的坐标，然后将标记刷新到你的新位置，对吧？
现在我有凸轮指向地图不再刷新/重新加载的位置。我遇到了一个问题，需要删除标记并且必须用新的一次替换。

【解决方案2】：

我们遇到了与您遇到的类似的问题。我们解决它的方法是在每次添加新位置时重新计算边界并重新定位地图。所以基本上我们有一个 createMarker 函数，最后有这段代码：

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

bounds 这里是你的地图边界，可以通过google.maps.LatLngBounds() 方法找到。

编辑：我看到你想在不刷新地图的情况下这样做，我不认为重置边界会刷新地图，但我可能错了。

【讨论】：

拟合图不是这里的问题。如果您运行代码，您将了解我正在尝试更改重新加载整个地图的坐标。我不想要..我只想用地图替换纬度和经度坐标而不重新加载/刷新googlemap
如果你可以运行我的代码，你会发现地图上的坐标发生了变化，地图正在重新加载，这是我不想要的。第 80 行，即 var map = new google.maps.Map(document.getElementById('map')，它正在重新加载地图。** 我觉得我需要更改或需要在第 80 行进行修改**