Question

<!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和其他博客提供的所有方式。什么都没有帮助我，在这里张贴希望有人帮助我这一部分。

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

Answer 1

我在这。这是对的。我修改了一些代码以确定是否符合您的要求。我想你只是错过了一些细节。如果这是你想要的，请告诉我。 PS：功能改变中的很多forloop - ＆gt;不是一个很好的例子.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>

Answer 2

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

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

bounds这里是您的地图边界，可以使用google.maps.LatLngBounds()方法找到。

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

在地图上更改坐标

2 个答案: