谷歌地图为什么在添加新标记时会重绘整个页面答案

【问题标题】：Google Maps Why does the entire page get redrawn when adding new markers谷歌地图为什么在添加新标记时会重绘整个页面
【发布时间】：2013-04-29 22:28:27
【问题描述】：

我有一个地图应用程序，并且我有在 document.ready() 时加载的标记，当我单击按钮时，我还有其他一些标记，但是当我单击按钮时，标记添加到文档中。 ready() 丢失了。

当点击按钮时，整个页面被提交并重新绘制。这也导致我的地图移动非常缩放和滚动速度很慢。有人可以帮忙。下面是我的代码。我想让页面运行得更快，我不想在每个 ajax 请求上都重新绘制它。

代码

  <script type="text/javascript">


      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(10.670044,-61.515305),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);


        var criminal = new google.maps.MarkerImage('resources/icons/police_new.ico',
                new google.maps.Size(100,106),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

        var companyPos = new google.maps.LatLng(10.670044,-61.515305);
        var companyMarker = new google.maps.Marker({
            position: companyPos,
            map: map,
            icon: criminal,
            title:"First Criminal"
        });


        $.ajax({
            type:'GET',
            async:false,
            global:'false',
            url:'getListOfCrimeHotSpot.htm',
            headers : {Accept: 'application/json'},
            dataType: 'json'            
        }).done(function(hotspot){

            $.each(hotspot, function(i,h){
                var icon = 'resources/icons/information.ico';

                new google.maps.Marker({
                    position:new google.maps.LatLng(h.lat,h.lng),
                    map:map,
                    icon: new google.maps.MarkerImage(icon, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50)),
                    title: 'Crime Rating : ' + h.crimeLevel+' @ ' +h.crimeLevelCount+' / ' + h.totalNumberOfCrimes
                });
            });
        });



       return map; 


      }//end initialize


 var global_citizens;      

$(document).ready(function(){
    map = initialize();


         $('#startTracking').on('click',function(){
             $.each(global_citizens, function(i, c) {
                 console.log(c.name );

             });
         });



    $('#getCitizens').on('click', function() {
        /*var mapOptions = {
            center: new google.maps.LatLng(10.670044, -61.515305),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };*/
         //map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

        $.ajax({
            type: 'GET',
            async : false,
            global: 'false',
            url: 'getListOfMarkers.htm',
            headers : {Accept: 'application/json'},
            dataType: 'json'
        }).done(function(citizens) {
            global_citizens = citizens;

            var markerSource = [
                null,
                null,
                'resources/icons/criminal_new.ico',
                'resources/icons/victim_new.ico',
                'resources/icons/suspect_new.ico'
            ];
            $.each(citizens, function(i, c) {
                //console.log(c.name + ' | ' + c.socialSecurityNumber + ' | ' + c.lat+ ' | ' +c.lng);
                var icon = markerSource[c.citizenType];
                if(markerSource) {
                    new google.maps.Marker({
                        position: new google.maps.LatLng(c.lat, c.lng),
                        map: map,
                        icon: new google.maps.MarkerImage( icon, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50) ),
                        title: c.name +'-' +c.socialSecurityNumber
                  });
                }
            });
        });
    });

});
</script>

html

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:90%">

   <!-- MAP GOES IN HERE -->

  </div>

  <div id="toolbar">
    <button class="btn" id="getCitizens" onclick="" type="button">Get Citizens</button>
    <button class="btn" id="startTracking" onclick="" type="button">Start Tracking</button>
  </div>
</body>

【问题讨论】：

嘿，您已经发布了大量的 Javascript 代码，但是您能否发布它所处理的 HTML 部分，并且还可以通过步骤 1：执行此操作，步骤 2：然后执行操作。 . 有点;)
如果您有一些开发人员嗅探技能，请检查此网站是否使用 ajax 和一些重量级地图标记加载发生 visitdublin.com/map（我以前做过一次）如果您愿意我可以发布明天晚些时候（抱歉后 12-14 小时）基于此的答案。
@HarshBaid 谢谢我更新了包含html的问题
你能告诉我如何防止每次点击按钮时添加标记
@Harsh Baid 我得到了这个工作我在全局范围内创建了一个映射变量并继续使用它而不是每次都重新创建一个新变量。至于重复标记，我实现了 markerMaager 并使用了 markerManager.clearMarkers();它工作正常

标签： javascript jquery google-maps google-maps-markers

【解决方案1】：

以下行导致问题（在此函数内部：$('#getCitizens').on('click', function() {）。

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

每次单击#getCitizens 时，您都会创建一个新地图。请改用先前实例化的映射（由初始化函数返回的映射）。您不必以这种方式重新加载地图。

【讨论】：

还有关于为什么地图在滚动和缩放时移动缓慢的任何建议。任何可以加速的方式
我不确定你的意思，你能分享一下Jsfiddle中的代码吗？
我删除了 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);并将 var 地图放置在范围之外，但地图上没有绘制图标
图标未绘制
函数触发但图标没有放在地图上

【解决方案2】：

我无法重现上述问题，您可以尝试使用 Google Maps API V3.11 检查以下代码示例，该示例非常高效，可加载大约 250 个标记。

<!DOCTYPE html>
<html>
    <head>
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

屏幕预览：

【讨论】：

我在看你的位置，我看到的是西南和东北坐标，你能解释一下吗？我正在地图上移动标记，我想将它保留在某个国家/地区，您能告诉我是否可以应用您用来设置边界的相同技术。
我的标记根据生成随机坐标的算法移动