javascript學習地圖的簡單介紹

本文目錄一覽：

• 1、學習網絡GIS的開發都需要學習哪些基本的東西？
• 2、想要學習arcgis for js，誰知道有什麼書籍。
• 3、求大神指導，有沒有前端學習視頻，自己找了好多，感覺有點亂，覺得學的路線會錯
• 4、用javascript怎麼實現地圖功能
• 5、初識 D3.js ：打造專屬可視化
• 6、如何使用百度地圖API

學習網絡GIS的開發都需要學習哪些基本的東西？

GISer入門指南電子書第一季 分享版.pptx免費下載

鏈接: 

 提取碼: wttn

ArcGIS入門級教程,詳細介紹了ArcGIS產品族及成員產品 1、GIS 的概念和需求 2、什麼是ArcGIS 3、Geodatabase中的GIS數據概念 4、桌面GIS產品:ArcView, ArcEditor和ArcInfo等

想要學習arcgis for js，誰知道有什麼書籍。

直接看這本書

《WebGIS從基礎到開發實踐(基於ArcGIS API for JavaScript)》

如果沒有任何基礎，最好旁邊有個懂GIS的，幫你安裝軟件、處理數據、發佈服務什麼的

需要學習dojo、arcgis js api，官網都是英文

還是看上面的書合適

網上也很少有相關視頻，不像java視頻，到處都是

求大神指導，有沒有前端學習視頻，自己找了好多，感覺有點亂，覺得學的路線會錯

   1.首先零基礎學習前端先要有一個計劃，了解前端要學習哪些技術。

2.做好自己的時間規劃，如何快速入門前端那肯定是需要不斷的提高自己的學習效率，學習過程中盡量把手機調至靜音給自己一個安靜的學習環境和氛圍。

3.快速入門顧名思義肯定是少走彎路，在學習過程中看下自己身邊有沒有前端這方面的大神盡量多問，多交流，如果是沒有的話，可以多去找一些前端的交流群，學習肯定是不能閉門造車。

學習是一個循序漸進的過程，前端的學習也是如此。

不論前端開發還是後端開發的學習都要求我們多動手，既要反覆的看書，也把學習到的知識點第一時間去實踐。前端的學習入門快要三個月，慢的要 5-6 個月左右，看個人的理解速度來評估，只要入門了不論理解能力，還是學習的速度都會有明顯的提升。

在學習前端的過程中，除了要把學到的知識點第一時間去實踐，也要在學習的每個階段自己創建課題，用所學到的知識去實現課題的內容。這樣可以更好有助於理解和累計一定的項目經驗。

前端的學習從來不是孤軍奮戰，需要一個前輩的領路，也需要一個平台不斷交流和思維碰撞。這樣可以快速入門和少走彎路，也能讓自己發現問題的根本所在。

階段一

在學習前端之前呢，你需要一個編輯器，在網上你可以看到很多編輯器用來編寫前端，甚至 Windows 系統默認的文本文檔也可以作為前端代碼的編輯器。俗話說，沒有金剛鑽怎麼攬瓷器活，所以一個好的編輯器很重要，我在這裡推薦給大家的編輯器是 VSCode。

思維導圖

前端開發工具

一、HTML+CSS

前端的入門門檻是極低的，主要體現在 HTML 和 CSS 部分，運行環境就是瀏覽器，不像如 Java 需要配置開發/運行環境。

HTML 和 CSS 不是編程語言，HTML 是結構標籤，CSS 是結構標籤的樣式配置。

HTML

屬性

事件

標籤

字符集

CSS

CSS基礎教程

CSS樣式

CSS框模型

CSS定位

CSS選擇器

CSS高級

思維導圖

HTML+CSS以上內容的學習用時 20天左右，再花 2 天的時間項目實踐，這部分總花費時間在 22天左右。

二、HTML5+CSS3

HTML5 作為 HTML 的最新版本，引入了多項新技術，大大增強了對於應用的支持能力，使得Web技術不再局限於呈現網頁內容。

HTML5 可以使開發者的工作大大簡化，理論上單次開發就可以在不同平台藉助瀏覽器運行，降低開發的成本，這也是產業界普遍認為 HTML5 技術的主要優點之一。

CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進階版，拆分和增加了盒子模型、列表模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等。

CSS3的改變有很多，增加了文字特效，豐富了下劃線樣式，加入了圈重點的功能。在邊框方面，有了更多的靈活性，可以更加輕鬆地操控漸變效果和動態效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，並且網絡瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕鬆。

HTML5

HTML5視頻

HTML5音頻

HTML5拖放

HTML5畫布

HTML5 SVG

HTML5地理定位

HTML5 Web存儲

HTML5 應用緩存

HTML5表單

CSS3

CSS3邊框

CSS3背景

CSS3文本效果

CSS3字體

CSS3 2D轉換

CSS3 3D 轉換

CSS3 過渡

CSS3 動畫

CSS3 多列

思維導圖

HTML5+CSS以上內容用時 10 天左右，這部分內容是在 HTML+CSS 做的升級改進，只需要了解他們的一些特性即可，再結合這些特性做一些小項目加深學習。

請點擊輸入圖片描述

四、JavaScript

JavaScript 是 web 開發者必學的三種語言之一，這裡我們需要區別 JavaScript 和 Java 他們是完全不同的語言，不論是概念還是設計。javascript 部分需要我們學習的知識點如下所示：

認識JavaScript

基本語法

變量

數據類型

字符串

數字

布爾

數組

對象

Null

Undefined

5. 函數

內置函數

自定義哈數

6. 運算符

7. 流程控制

8. DOM對象

String

Array

Date

Boolean

Math

Number

9. BOM對象

WIndow

Navigator

Screen

History

Location

10. 綜合實例

思維導圖

javascript以上內容的學習用時 35天 左右，這裡推薦幾本 Javascript 的書籍，如下：

《JavaScript 高級程序設計（第3版）》，俗稱紅寶書。前七章講的是語言特性，是重點學習的部分，必須需要反覆閱讀，直至完全理解為止。DOM、事件流、表單、JSON、Ajax 與最後幾章也需要重點學習，這是一些常用的 Web API。至於本書的其餘部分大致讀一下就可以，不做重點要求。

《JavaScript 語言精粹》，俗稱蝴蝶書。很薄的一本書總頁數就 147 頁，花一天時間就能看完，快的話半天就能看完。這本書雖然很薄，但是承載的內容卻非常的豐厚和深入。JavaScript是一門有很多坑的語言，所以這本書」取其精華，去其糟粕「就是精粹了。

《你不知道的 JS》非常精彩的一本書，將 JavaScript 的細節一網打盡。

階段二

這部分內容是對 JavaScript 的補充學習

四、 Jquery學習

1. 基礎語法

2. 選擇器

基本選擇器

層次選擇器

過濾選擇器

表單選擇器

3. DOM操作

查找節點

創建節點

插入節點

刪除節點

複製節點

替換節點

包裹節點

屬性操作

樣式操作

4. 事件

事件綁定

事件冒泡

5. 動畫

show、hide

fadeIn、fadeOut

slideUp、slideDown

自定義動畫animate

動畫回調以及停止動畫

6. 常用工具

瀏覽器及特性檢測

數組和對象操作

Layer UI，主要學習柵格布局，圖標，動畫，按鈕，表單，導航，選項卡，進度條，面板，表格，時間線等

7. Ajax

8. Jquery插件編寫

思維導圖

請點擊輸入圖片描述

二、其他

JavaScript 進階

DOM+BOM綜合演練

網頁特效

ES6 進階

bootstrap

animate.css學習

請點擊輸入圖片描述

以上內容的學習用時 10天左右

階段三

這部分是框架和前後端交互技術的學習

一、Vue

Vue基礎

模版語法

計算屬性偵聽器

Class與Style綁定

條件/列表渲染

事件處理

表單輸入綁定

組件基礎、註冊

Prop

自定義事件

2. Vuex

State

Getter

Mutation

Action

Module

3. Vue-router

認識路由

動態路由

嵌套路由

編程式導航

路由組件傳參

4. axios

認識axios

全局配置

發送POST、GET請求等

思維導圖

請點擊輸入圖片描述

二、React

認識React

React元素渲染

JSX

組件

State

Props

事件處理

條件渲染

列表

組件API

組件聲明周期

思維導圖

三、Node

基礎

console（控制台）

crypto（加密）

debugger（調試器）

fs（文件系統）

http（網絡）

os（操作系統）

path（路徑）

2. 高級

NPM介紹及使用

MVC模式簡介

Express框架學習

鏈接Mysql

鏈接Redis

項目實戰

思維導圖

Node

四、webpack

概念

主要講什麼是入口，出口，loader，插件等

2. 入口

單個入口語法

對象語法

常見場景

3. 輸出

用法

多個入口起點

高級進階

4. 模式

development

production

5. loader

實例

配置

6. 插件

剖析

用法

配置

7. 配置

基本配置

多個Target

使用其他語言配置

8. 模塊

思維導圖

webpack

以上內容用時 兩個月 左右

階段四（擴展部分，了解即可）

一、Mysql

階段一

認識mysql

安裝mysql

創建數據庫、數據表

學習常用的SQL命令，完成增刪查改

2. 階段二

學習Mysql關聯查詢，子查詢等

學習Mysql常用函數

學習Mysql分組、分頁、排序等

3. 階段三

學習Mysql高級查詢

了解存儲過程，自定義函數等

了解Mysql配置文件

二、Redis

認識Redis

學習redis的數據類型

redis常用操作

redis事務

思維導圖

數據庫

以上內容用時 7 天左右

階段五

一、項目管理篇

SVN使用

認識svn

安裝

生命周期

啟動模式

創建版本庫

檢出操作

解決衝突

提交操作

版本回退

查看歷史

分支

標籤

2. GIT使用

認識git

安裝配置

工作流程

工作區、暫存區和版本庫

創建倉庫

基本操作

分支管理

查看歷史等

標籤

github

二、擴展部分

小程序

1. 了解小程序開發流程

2. 視圖容器

view

scroll-view

movable-view

cover-view

cover-image

3. 基礎內容

icon

text

rich-text

progress

4. 表單組件

button

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

5. 導航

navigator

function-page-navigator

6. 媒體組件

audio

image

video

camera

live-player

live-pusher

7. 地圖（map）

8. 畫布（canvas）

9. 開放能力

open-data

web-view

ad

official-account

apicloud（移動app開發）

認識apicloud

開發工具講解

端API

API對象

設備訪問

功能擴展

界面布局

導航菜單

小程序模塊

雲服務對接

4. 雲API

數據云API

統計雲API

推送雲API

雲API SDK

5. 小程序模塊使用

三、常用框架使用篇

iview （vue框架）

element ui （vue框架）

echarts (百度圖標庫)

阿里巴巴開源圖標使用

Sass學習

Swiper學習

zoom.js 學習

四、綜合項目實戰

教務管理系統（node+express+mysql）實現

思維導圖

擴展學習部分

參考資料：前端學習路線，如何學習前端

用javascript怎麼實現地圖功能

lol,樓上仗劍折花的方法太幽默了，他那個完全是在模仿一種效果，如果是需要模仿就夠了的話還不如直接做成幾張圖片切換，還可以做的更加美觀，我覺得樓主是希望獲得能判斷經緯度的動態效果，不過如果要自己重頭創建的話幾乎不可能.不僅要用到web技術還需要gis技術以及具有空間地理坐標的地理數據，每一項都不是幾個人能在短期完成的工程，另一點樓主要實現實現顯示有意義的動態區域框的功能，如果是bs模式的話需要使用支持畫圖功能的語言，而這類語言當前瀏覽器支持均非常有限，替代方法是使用java applet，即編寫java，

直觀的概念，google map即包含樓主所要的經緯度的坐標數據，因為有這些數據所以你才能在google map上實現精確定位，畫圖功能google map也沒有實現，你可以找一些web gis的一些更加高級的應用網站應該有這項功能，所以，google map解決這個問題也不是一天兩天一個人兩個人能做好的，要不就不會成為google的產品了。

解決辦法，

你可以基於google提供的google map提供的api來創建你的應用，這樣經緯度，地圖數據以及主要的技術問題都由google map提供，你只需基於它創建自己的應用即可，但要知道如何使用google api也不是輕鬆的事。網上有很多關於google api學習的文章和著作，可先學習一下

初識 D3.js ：打造專屬可視化

隨着現在自定義可視化的需求日益增長，Highcharts、echarts等高度封裝的可視化框架已經無法滿足用戶各種強定製性的可視化需求了，這個時候D3的無限定製的能力就脫穎而出。

如果想要通過D3完成可視化，除了對於D3本身API的學習, 關於web標準的HTML, SVG, CSS, Javascript 和 數據可視化的概念以及標準都是需要學習的。這無疑帶來了較高的學習門檻，但這也是值得的，因為掌握 D3 後，我們幾乎可以實現任何 2d 的可視化需求。

本文通過對D3核心模塊分析以及進行具體案例實踐的方式，來幫助初學者學習了解D3的繪圖思路。

D3的全稱是 Data-Driven Documents（數據驅動文檔），是基於數據來操作文檔的 JavaScript 庫，其核心在於使用繪圖指令對數據進行轉換，在源數據的基礎上創建新的可繪製數據， 生成SVG路徑以及通過數據和方法在DOM中創建數據可視化元素（如軸）。

相對於Echats等開箱即用的可視化框架來說，D3更接近底層，它可以直接控制原生的SVG元素，並且不直接提供任何一種現成的可視化圖表，所有的圖表都需我們在它的庫里挑選合適的方法構建而成，這也大大提高了它的可視化定製能力。而且D3 沒有引入新的圖形元素，它遵循了web標準（HTML, CSS, SVG 以及 Canvas ）來展示數據 ，所以它可以不需要依賴其他框架獨立運行在現代瀏覽器中。

在V4版本後，D3的 API 現在已經被拆分成一個個模塊，我們可以根據自己的可視化需求進行按需加載。根據泛義可以將D3 API模塊分為以下的幾大類： DOM操作、數據處理，數據分析轉換、地理路徑，行為等 。

這裡我們主要對 D3-selection 和 D3-scale 模塊進行解析：

D3-selection （選擇集） 是 D3js的核心模塊，主要是用來進行選擇元素，設置屬性、數據綁定，事件綁定等操作。

選擇元素： D3-selection 提供了兩種方法來獲取目標元素，d3.select()：返回目標元素的第一個節點，d3.selectAll()：返回目標元素的集合，乍一看有點類似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一個 selection 對象，querySelector 返回的是一個 NodeList 數組。通過控制台打印的信息，可以看到 selection 下的 groups 存放了所有選擇的元素集合，parents 存放了所有選中元素的父節點。

設置屬性或者綁定事件： 我們不需要關心 groups 的結構是怎麼樣的。當調用 selection.attr 或者 selection.style 的時候, selection 中的所有 group 的所有子元素都會被調用，group 存在的唯一影響是: 當我們傳參是一個function 的時候，例如 selection.attr(‘attrName’, function(data, i)) 或 selection.on(‘click’, function(data, i)) 時， 傳遞的 function(data, i) 中, 第二個參數 i 是元素在 group 中的索引而不是在整個 selection 中的索引。

數據綁定： 實際上是給選擇的DOM元素的 __data__ 屬性賦值，這裡提供了3種方式進行數據綁定：

（1）給每一個單獨的 DOM 元素調用 selection.datum：d3.select(‘body’).datum(20) 等價於 document.body.__data__ = 20

（2）從父節點中繼承來數據, 比如: append , insert , select，子節點會主動繼承父節點的數據：

（3） 調用 selection.data() 方法，支持傳入裝有基礎數據類型的數據，也支持傳入一個function(parentNode, groupIndex)根據節點索引與數據做映射，data()方法引入了 d3 中非常重要的 join 思想:

綁定 data 到 DOM 元素， 在D3中是通過比較 data 和 DOM 的 key 值來找到對應關係的。 如果我們沒有單獨設置 key 值，那麼默認根據 data 的下標索引來設定，但是當數據順序發生改變，這個默認下標 key 值 就變得不可靠了，這時我們可以使用 selection.data(data, keyFunction) 中的第二個參數 keyFunction，根據當前的數據返回一個對應的 key 值。通過下面的圖例可以看出，不管是有一個還是多個 group（每個group 都是獨立的），只要我們保證在任意一個 group 中的 key 值是唯一的，數據一旦發生變化都會反映給對應的 DOM 元素（ update 的過程）：

上面提到的都是data數據和DOM元素數量相同的情況下的數據綁定，那如果data數據和DOM元素數量不相同時，我們來看看 D3 又是如何進行數據綁定的：現在終於可以來介紹 D3-selecion 模塊的核心 Join 思想了，這個思想簡單來說就是 「不應該告訴D3去怎麼創建元素, 而是告訴D3，.selectAll() 得到的 selecion 集合應該和 .data(data) 綁定的數據要怎麼一一對應」。

從上圖可以看出，在進行 d3.data(data) 數據綁定的時候，會產生三種狀態的選擇集：

用 Join 的方式來理解意味着，我們要做的事情僅僅是聲明 DOM集合和數據集合之間的關係, 並且通過處理三個不同狀態的集合 enter、update 、 exit 來描述這種關係。這種方式可以大大簡化我們對DOM元素的操作，我們不需要再用 if 和 for 循環的方式來進行複雜的邏輯判斷，來得到我們需要得到的元素集合。並且在處理動態數據的時候，可以通過處理這三種狀態，輕鬆的展示實時數據和添加平滑的動態交互效果。

D3-scale （比列尺） 提供多種不同類型的比例尺。經常和 D3-axis 坐標軸模塊一起使用。

D3-scale 提供了多種連續性和非連續性的比例尺，總體可以將他們分為三大類：

常用的一些比例尺：

（1）d3-scaleLinear 線性比例尺(連續性輸入和連續性輸出)

可以看出，調用d3.scaleLinear()可以生成線性比例尺，domain()是輸入域，range()是輸出域，相當於將domain中的數據集映射到range的數據集中。

使用示例：

映射關係：

（2）d3-scaleTime 時間比例尺(連續性輸入和連續性輸出)

時間比例尺與線性比例尺類似，只不過輸入域變成了一個時間軸。正常我們使用比例尺都是個正序的過程，但是D3也提供了invert()以及invertExtent()方法，我們可以通過輸出域中的具體值得出對應輸入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(連續性輸入和離散性輸出)

量化比例尺是將連續的輸入域根據輸出域被分割為均勻的片段，所以它的輸出域是離散的。

使用示例：

映射關係：

（4）d3. scaleThreshold 閾值比例尺(連續性輸入和離散性輸出)

閾值比例尺可以為一組連續數據指定分割閾值，閾值比例尺默認的 domain：[0.5] 以及默認的 range：[0, 1] ，因此默認的 d3.scaleThreshold() 等價於 Math.round 函數。 閾值比例尺輸入域為 N 的話，輸出域必須為 N + 1，否則比例尺對某些值可能會返回 undefined，或者輸出域多餘的值會被忽略。

使用示例：

存在三種映射關係：

a. 當domain和range的數據是 N : N+1

b. 當domain和range的數據是 N : N + 大於1

c. 當domain和range的數據是 N + 大於0 : N

（5）d3.scaleOrdinal 序數比例尺(離散性輸入和離散性輸出)

與scaleLinear等連續性比例尺不同，序數比例尺的輸出域和輸入域都是離散的。

使用示例：

存在三種映射關係：

a.當domain和range的數據是一一對應

b.當domain少於range的數據

c.當domain多於range的數據

通過以上的學習，應該對d3是如何操作DOM以及坐標軸的數據映射為相應的可視化表現有了一定的了解，下面我們來實際運用這兩個模塊，來實現我們常見的可視化圖表：柱狀圖。

（1）首先添加一個SVG元素。

（2）根據我們上面說到 d3.scale 模塊以及 d3.axis 模塊繪製坐標軸，d3.scaleBand() 叫做序數分段比例尺，類似我們說的 d3.scaleOrdinal() 序數比例尺，但是它支持連續的數值類型的輸出域，離散的輸入域可以將連續的範圍劃分為均勻的分段。這裡再講一個細節，在繪製網格的時候，我們並沒有額外添加 line 元素來實現，而是通過 d3.axis 坐標軸模塊的 axis.ticks() 方法對坐標軸刻度進行了設置，通過 tickSIze() 設置了刻度線長度，來模擬和圖表寬度相等的網格線，並且還可以通過 tickFormat() 對Y軸刻度值進行格式化轉換。

（3）坐標軸繪製好了後，我們通過數據綁定來繪製與之對應的矩形(rect)元素了。

（4）這個時候柱狀圖已經基本繪製好了，我們再豐富內容展示，添加標籤、標題等提示信息。

（5）最後我們通過給柱子綁定監聽事件，實現tooltips的信息浮層交互。

通過對 d3.selection 、d3.scale 以及 d3.axis等模塊的學習，我們已經可以繪製出常用的柱狀圖等圖表，我們也可以通過d3提供的其他模塊繪製出更加複雜的可視化效果，例如通過 d3-hierarchy(層級模塊) 實現層級樹圖可視化，d3-geo(地理投影) 實現地圖數據可視化等，本文講解的內容還只是D3庫的冰山一角。所以等我們掌握了D3後，限制我們實現可視化的不再是技術而是想像力。

如何使用百度地圖API

百度地圖API

開始學習百度地圖API最簡單的方式是看一個簡單的示例。以下代碼創建了一個520×340大小的地圖區域並以天安門作為地圖的中心:

1. html

2. head

3. meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

4. titleHello, World/title

5. script type=”text/javascript” src=”;v=1.0services=false”/script

6. /head

7. body

8. div style=”width:520px;height:340px;border:1px solid gray” id=”container”/div

9. /body

10. /html

11.

12.

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

titleHello, World/title

script type=”text/javascript” src=”;v=1.0services=false”/script

/head

body

div style=”width:520px;height:340px;border:1px solid gray” id=”container”/div

/body

/html

1. script type=”text/javascript”

2. var map = new BMap.Map(“container”); // 創建地圖實例

3. var point = new BMap.Point(116.404, 39.915); // 創建點坐標

4. map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別

5. /script

6.

script type=”text/javascript”

var map = new BMap.Map(“container”); // 創建地圖實例

var point = new BMap.Point(116.404, 39.915); // 創建點坐標

map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別

/script

引用百度地圖API文件

當您引用地圖API文件時，需要使用自己申請的API密鑰。

1. script type=”text/javascript” src=”;v=1.0services=false”/script

script type=”text/javascript” src=”;v=1.0services=false”/script

創建地圖容器元素

1. div style=”width:520px;height:340px;border:1px solid #000″ id=”container”/div

div style=”width:520px;height:340px;border:1px solid #000″ id=”container”/div

地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這裡我們創建了一個div元素並制定它的大小。地圖會根據容器大小調整自身尺寸。

命名空間

API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

創建地圖實例

1. var map = new BMap.Map(“container”);

var map = new BMap.Map(“container”);

位於BMap命名空間下的Map類表示地圖，通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象。

注意在調用此構造函數時應確保容器元素已經添加到地圖上。

創建點坐標

1. var point = new BMap.Point(116.404, 39.915);

var point = new BMap.Point(116.404, 39.915);

這裡我們使用BMap命名空間下的Point類來創建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。

地圖初始化

1. map.centerAndZoom(point,15);

map.centerAndZoom(point,15);

在創建地圖實例後，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。

地圖必須經過初始化才可以執行其他操作。

地圖操作

地圖被實例化並完成初始化以後，就可以與其進行交互了。API中的地圖對象的外觀與行為與百度地圖網站上交互的地圖非常相似。它支持鼠標拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。

您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態的方法。例如：setCenter()、panTo()、zoomTo()等等。

下面示例顯示一個地圖，等待兩秒鐘後，它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點，如果移動距離超過了當前地圖區域大小，則地圖會直跳到該點。

1. var map = new BMap.Map(“container”);

2. var point = new BMap.Point(116.404, 39.915);

3. map.centerAndZoom(point, 15);

4. window.setTimeout(function(){

5. map.panTo(new BMap.Point(116.409, 39.918));

6. }, 2000);

var map = new BMap.Map(“container”);

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

window.setTimeout(function(){

map.panTo(new BMap.Point(116.409, 39.918));

}, 2000);

原文：