1、拷貝官網源代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>自動放大縮小</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
.btn{
width:142px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
//
var init = function() {
var map = new qq.maps.Map(document.getElementById("container"),{
center: new qq.maps.LatLng(39.916527,116.397128),
zoom: 4
});
setInterval(function() {
map.zoomTo((map.getZoom() + 1) % 17);
}, 2000);
}
</script>
</head>
<body οnlοad="init()">
<div style="width:603px;height:300px" id="container"></div>
<p>每隔2秒鐘地圖縮放級別增大一級別，到最大級時重設爲最小級別。</p>
</body>
</html>這裏
onload 事件會在頁面或圖像加載完成後立即發生（html）。
setInterval是html DOM方法setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
創建地圖與創建街景不同，創建街景爲new qq.maps.Panorama，而創建地圖使用API爲
new qq.maps.Map地圖的構造函數需要傳遞地圖的中心點緯經度：center，new qq.maps.LatLng，初始縮放級別爲4
然後設置一個時鐘：每隔兩秒地圖放大一個級別，最大到17級再重置（騰訊地圖API的地圖縮放級別爲 4-17）（問題是這裏getZoom（）返回值爲0-16，與4-17並不完全一致，個人測試，這裏地圖級別小於1時重置爲1，此時爲世界地圖，2爲亞洲，3爲中國全圖（個人猜測）4顯示各省份，最大可以放大到18級，大於18級不再變化。
通過 getZoom( )方法可以得到當前地圖的縮放級別，通過 zoomTo( )方法可以修改地圖的縮放級別。示例中定時每隔 2 秒鐘將地圖的縮放級別加 1，騰訊地圖API的地圖縮放級別爲 4-17。
通過 panTo 方法來設置地圖的中心點. map.panTo(newqq.maps.LatLng(39.914850,
116.403765));
緯度和經度
用來表示地圖位置的方法。在 騰訊 Maps API qq.maps.LatLng 對象提供了此類機制，來實現一個地理座標位置。您可以構建一個 LatLng 對象，以 {緯度, 經度} 的順序傳遞其參數：
|
1
2
|
varmyLatitude
= 39.916527,myLongitude = 116.397128;varmyLatLng
= newqq.maps.LatLng(myLatitude,
myLongitude); |
如果不知道一個地點（如“天安門”）的地理座標，可以通過地址解析來得到。請注意：將“地址”轉變爲地理座標的過程叫做“地址解析”。有關詳細信息，請參見服務部分中的地址解析。也可以通過 《參考手冊》 來具體瞭解這個接口如何去使用。
地圖配置
使用騰訊地圖 API 默認初始化的地圖實例，用戶可以對其進行鼠標拖拉、鼠標滾輪進行放大縮小以及鼠標雙擊放大等操作。我們通過修改地圖的配置信息來決定是否希望用戶能夠通過鼠標操作修改地圖狀態。騰訊地圖API提供了修改地圖配置的接口：
|
1
2
3
4
5
6
7
8
9
10
|
map
= newqq.maps.Map(document.getElementById("container"),{center:newqq.maps.LatLng(39.914850,
116.403765),zoom:
13,draggable:false,scrollwheel:false,disableDoubleClickZoom:false}); |
- setDraggable 用來設置地圖是否能夠鼠標拖拽，默認值爲“可以”；
- setScrollWheel 用來配置地圖是否能夠通過鼠標滾輪操作進行放大，默認值爲“可以”；
- setZoomInByDblClick 用來配置地圖是否可以通過鼠標雙擊進行放大，默認值爲“可以”。
地圖 DOM 元素
源代碼示例
|
1
|
<div
id="container"
style="width:500px;
height:300px"></div> |
要使地圖在網頁上顯示，必須爲其在網頁中留出一個位置。通常，我們通過創建名爲 div 的元素並在瀏覽器的文檔對象模型 (DOM) 中獲取此元素的引用執行此操作。在上述示例中，我們定義名爲 "container" 的 div，並使用樣式屬性設置其尺寸。地圖會自動使用容器尺寸調整自身的尺寸。
通過 Map 構造函數創建地圖之後，還需要執行一個操作，即將其初始化。初始化通過地圖的 panTo() 方法完成。panTo() 方法需要LatLng 經緯度座標，並且調用此方法必須在對地圖執行任何其它操作（包括設置地圖本身的任何其它屬性）之前。