android 高德地圖多個marker帶圖顯示_GPS原理與程式設計實作高德地圖

GPS的原理簡單說就是從監測站發射電磁波，計算衛星接收信号所用時間然後乘以光速，求出一個僞距離，一般是4顆衛星定位一點

列出4個點或者更多解方程，解出x,y,z 就是該點坐标

當然這些都是我們不需要關心的，我們這裡可以直接使用高德地圖api接口來使我們的web應用産生地圖和定位。(文末有完整代碼)

新增賬號并申請Key

1. 首先，注冊開發者賬号，成為高德開放平台開發者

2. 登陸之後，在進入「應用管理」 頁面「建立新應用」

3. 為應用添加 Key，「服務平台」一項請選擇「 Web 端 ( JSAPI ) 」

準備頁面

1.在頁面添加 JS API 的入口腳本标簽，并将其中「您申請的key值」替換為您剛剛申請的 key；

HTML

2.添加div标簽作為地圖容器，同時為該div指定id屬性；

HTML

3.為地圖容器指定高度、寬度；

CSS

#container {width:300px; height: 180px; } 
           

4.進行移動端開發時，請在head内添加viewport設定，以達到最佳的繪制性能；

HTML

5.在完成如上準備工作之後便可以開始進行開發工作了，檢視快速入門。

異步加載 JS API

上一節說明的是最基本的同步加載 JS API 的方式，如果您需要異步加載，比如通過appendChild，或者通過require等異步方式來加載，這時需要您需要先準備一個全局的回調函數作為 JS API 異步加載的回調函數，并将其函數名作為callback參數添加在 JS API 的引用位址後面，此時要注意，回調函數應該在腳本請求發出之前進行聲明。異步加載方式隻有在回調之後，才能開始調用JSAPI的相關接口。比如

JavaScript

window.onLoad = function(){ var map = new AMap.Map('container'); } var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=onLoad'; var jsapi = doc.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi);
           

按照「準備」篇完成頁面準備工作之後就可以真正開始地圖的開發工作了。本篇帶您快速了解：地圖、圖層、點标記、矢量圖形、資訊窗體、事件的最基本使用方法。

HELLO，AMAP！

簡單建立一個地圖隻需要一行代碼，構造參數中的container為準備階段添加的地圖容器的id：

JavaScript

var map = new AMap.Map('container');
           

建立的同時可以給地圖設定中心點、級别、顯示模式、自定義樣式等屬性：

JavaScript

var map = new AMap.Map('container', { zoom:11,//級别 center: [116.397428, 39.90923],//中心點坐标 viewMode:'3D'//使用3D視圖 });
           

圖層

預設情況下，地圖隻顯示标準底圖，如需要疊加别的圖層，可以通過map.add方法添加圖層：

JavaScript

var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 }); //實時路況圖層 var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); map.add(trafficLayer);//添加圖層到地圖
           

也可以在地圖初始化的時候通過layers屬性為地圖設定多個圖層：

JavaScript

var map = new AMap.Map('container', { center: [116.397428, 39.90923], layers: [//使用多個圖層 new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ], zooms: [4,18],//設定地圖級别範圍 zoom: 13 });
           

地圖 JS API 提供了标準、衛星、路網、路況、建築等多個官方圖層，同時也提供了加載第三方WMS、WMTS、XYZ等标準圖層的接口，也提供了把一般的圖檔、Canvas、視訊、熱力等作為圖層的能力，檢視圖層相關教程。

點标記與矢量圖形

JS API 提供了在地圖之上繪制覆寫物的能力，比如點标記 Marker、文本标記 Text、圓點标記 CircleMarker。

添加點标記的方法非常簡單，比如添加一個預設樣式的Marker：

JavaScript

var marker = new AMap.Marker({ position:[116.39, 39.9]//位置 }) map.add(marker);//添加到地圖
           

移除的方法如下：

JavaScript

map.remove(marker)
           

檢視點标記相關教程

也提供了繪制圓Circle、折線 Polyline、多邊形 Polygon、橢圓 Ellipse、矩形 Rectangle、貝瑟爾曲線 BesizerCurve等矢量圖形的能力，比如添加折線：

JavaScript

var lineArr = [ [116.368904, 39.913423], [116.382122, 39.901176], [116.387271, 39.912501], [116.398258, 39.904600] ]; var polyline = new AMap.Polyline({ path: lineArr, //設定線覆寫物路徑 strokeColor: "#3366FF