在地圖上繪製之創建標註
簡介
- 所有疊加或覆蓋到地圖的內容，我們統稱爲地圖覆蓋物。
- 覆蓋物擁有自己的地理座標，當拖動或縮放地圖時，它們會相應的移動。
- 覆蓋物主要分爲：
標註（點標註、矢量圖形（包括折線、多邊形、圓））、信息窗口、圖層。
說明：本節重點介紹一下如何向地圖添加標註
百度地圖提供的覆蓋物
| 覆蓋物 | 類名 | 說明 |
|---|---|---|
| 抽象基類 | Overlay | 所有的覆蓋物均繼承此類的方法 |
| 點 | Marker | 表示地圖上的點，可自定義標註的圖標 |
| 文本 | Label | 表示地圖上的文本標註，您可以自定義標註的文本內容 |
| 折線 | Polyline | 表示地圖上的折線 |
| 多邊形 | Polygon | 表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以爲其添加填充顏色 |
| 圓 | Circle | 表示地圖上的圓 |
| 信息窗口 | InfoWindow | 信息窗口也是一種特殊的覆蓋物，它可以展示更爲豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開 |
| 地面疊加層 | GoundOverlay | 表示疊加在地圖上的圖片，圖片的鏈接、大小、位置等屬性可以自定義 |
| 海量點 | PointCollection | 針對點的數量很大的情況，可以使用海量點進行展示 |
| 自定義覆蓋物 | 自定義 | 支持通過繼承覆蓋物基類Overlay，自定義覆蓋物 |
最基礎的用法就是：在地圖上添加一個點覆蓋物。
由上表可知，在這裏就需要用到Marker類來創建地圖上的標註點了，創建完成之後添加到地圖中就可以了。
關於標註點我們要知道的
Marker是一個用來往地圖上添加點標記的類。使用它可以將任何你希望用戶看到的興趣點標註在地圖上。Marker的構造函數的參數爲Point和MarkerOptions（可選）。API提供了默認的圖標（標註）樣式，我們可以通過Icon類來指定自定義圖標。（目前用不上，知道就行）覆蓋物類
Marker的使用如下圖所示： Marker類的使用詳情請戳這裏查看
分析：
（1）該構造函數存在兩個參數：一個是Point類型的；一個是MarkerOptions類型的。
（2）MarkerOptions類型是可選參數。（目前來說是用不到，如果要使用自定義圖標來添加覆蓋物的話可以用到該參數） MarkerOptions類的使用詳情請戳這裏查看
用法：
/*
*百度地圖使用BMap作爲命名空間，這是人家的規定，知道就行了。
*此外，所有的類都在該命名空間之下。
*如果要使用其他類，應該這麼寫：比如：BMap.Map()、BMap.Control()、BMap.Overlay()
*/
var mk = new BMap.Marker(point);//創建了一個點類型的標註，即標註點至此，標註點就已經創建完成。下面要做的就是：如何將標註點添加到地圖中。
- 可以使用
map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物。 - 注意：此方法不適用於
InfoWindow（即信息窗口覆蓋物，下面有提及）。
如下圖所示：
圖1 —— 核心類Map中的方法
使用方法：
map.addOverlay(mk);//裏面的參數爲覆蓋物實例，所以添加之前肯定要先創建一個覆蓋物實例
//上面我們使用Marker類的構造函數Marker()創建了一個標註點，同時也創建一個圖像標註實例mk。
//所以，在addOverlay()方法中傳入之前創建的標註實例mk即可將該標註添加到地圖中。圖2 —— 覆蓋物的抽象基類（點擊可查看）
注：（1）所有覆蓋物都繼承基類的方法；（2）此類不可實例化。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title創建標註</title>
<style>
html,body,#allmap{
height: 100%;
width: 100%;
overflow:hidden;
margin:0;
font-family: "微軟雅黑";
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
<div id="allmap"></div>
<script>
var map = new BMap.Map("allmap");//創建一個地圖
var point = new BMap.Point(116.404, 39.915);//創建一個地理點座標
map.centerAndZoom(point,12);
/*至此，地圖初始化完成*/
// Marker是一個用來往地圖上添加點標記的類。使用它可以將任何你希望用戶看到的興趣點標註在地圖上。
// Marker的構造函數的參數爲Point和MarkerOptions（可選）。
var mk = new BMap.Marker(point);//創建標註
map.addOverlay(mk);//將標註添加到地圖中
</script>
</body>
</html>其實也沒幾行代碼，看起來並不複雜：說實話，使用很簡單，只要會複製粘貼就行，但是要理解起來還是要花時間研究一下的
