Question

我有一个地图应用程序，我有标记，当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>

Answer 1

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

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

每次点击#getCitizens时，您都在创建新地图。使用先前实例化的映射（初始化函数返回的映射）。你不必以这种方式重新加载地图。

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

屏幕预览：

Google Maps showing 250 map marker loaded

Google地图为什么在添加新标记时会重新绘制整个页面

2 个答案: