2014-09-03 75 views
0

此代码将地图中心移动到四个位置之一。它有效,但似乎很慢。提前缓存4张地图或类似的东西是否有可能获得更好的性能?也许每次运行初始化函数都会让我们放慢速度?谷歌地图 - 更改中心

<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> 
+0

我认为'initialize'方法是缓慢的,因为你重绘基于更新的'地图mapOptions'” – 2014-09-03 02:23:45

回答

1

你可以尝试使用setCenter()更改地图的中心,而无需再次调用initialize功能,这里是如何

$("#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); 
});