Google지도 - 변경 센터

이 코드는지도 중심을 4 개 위치 중 하나로 이동시킵니다. 그것은 작동하지만 느린 것 같습니다. 미리 4 개의 맵을 캐싱하여 더 나은 성능을 얻을 수 있습니까? 매번 initialize 함수를 실행하면 우리 속도가 느려지는 것일까 요?Google지도 - 변경 센터

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="../jquery/jquery.js" type="text/javascript"></script> 

    <script> 


$(document).ready(function() { 

    var map; 
    var montreal = new google.maps.LatLng(45.504 , -73.597); 
    var newCenter = montreal 
    var toronto = new google.maps.LatLng(43.65304 , -79.32129); 
    var calgary = new google.maps.LatLng(50.99394, -114.16992); 
    var vancouver = new google.maps.LatLng(49.18984, -123.17871); 

    function initialize() { 
     var mapDiv = document.getElementById('map-canvas'); 
     var mapOptions = { 
     zoom: 10, 
     center: newCenter 
     } 
     map = new google.maps.Map(mapDiv, mapOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    $("#location_1").on("click", function() { 
     newCenter = montreal; 
     initialize(); 
    }); 

    $("#location_2").on("click", function() { 
     newCenter = toronto; 
     initialize(); 
    }); 
    $("#location_3").on("click", function() { 
     newCenter = calgary; 
     initialize(); 
    }); 
    $("#location_4").on("click", function() { 
     newCenter = vancouver; 
     initialize(); 
    }); 

}); 

    </script> 
    </head> 
    <body> 
    <button id='location_1'>Montreal</button> 
    <button id='location_2'>Toronto</button> 
    <button id='location_3'>Calgary</button> 
    <button id='location_4'>Vancouver</button> 

    <div id="map-canvas"></div>

출처

2014-09-03 Mustapha George

난 당신이 업데이트 '를 기반으로지도를 다시 그리는하고 있기 때문에'initialize' 방법은, 느린이라고 생각 mapOptions'' –

당신이 여기 다시 initialize 함수를 호출 할 필요없이지도의 중심을 변경 setCenter()를 사용하여 시도 할 수있는 방법을

$("#location_1").on("click", function() { 
    map.setCenter(montreal); 
}); 

$("#location_2").on("click", function() { 
    map.setCenter(toronto); 
}); 
$("#location_3").on("click", function() { 
    map.setCenter(calgary); 
}); 
$("#location_4").on("click", function() { 
    map.setCenter(vancouver); 
});

출처

2014-09-03 02:38:31 Kyojimaru