上圖效果JS代碼示例：
<script type="text/javascript">
// 創建Map實例
var map = new BMap.Map("allmap", {enableMapClick:false});
// 設置地圖背景色為白色
map.getContainer().style.background = '#FFF';
var point = new BMap.Point(104.074362,30.540276);
map.centerAndZoom(point, 5);
var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), {
// 初始化方向向上的閉合箭頭
icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 90,//順時針旋轉90度
fillColor: 'red',
fillOpacity: 0.5
})
});
map.addOverlay(vectorFCArrow);
// 隱藏方法
function hide(){
vectorFCArrow.hide();
}
// 顯示方法
function show(){
vectorFCArrow.show();
}
</script>
類參考
Symbol
此類表示通過svg的path string創建的矢量圖標類。
| 構造函數 | 描述 |
| Symbol(path: String | SymboShapeType, opts: SymbolOptions) | 創建一個矢量圖標實例。path為svg中的path字符串或者已定義的符號常量,opts為矢量圖標的樣式 |
| 方法 | 返回值 | 描述 |
| setPath(path: string | SymbolShape) | none | 設置矢量圖標的路徑 |
| setAnchor(anchor: Size) | none | 設置矢量圖標的定位點,該定位點的位置以圖標自身為基準 |
| setRotation(rotation: number) | none | 設置矢量圖標的旋轉角度,參數為角度 |
| setScale(scale: number) | none | 設置矢量圖標的縮放比例 |
| setStrokeWeight(strokeWeight: number) | none | 設置矢量圖標的線寬 |
| setStrokeColor(color: string) | none | 設置矢量圖標的線填充顏色,支持顏色常量字符串、十六進制、RGB、RGBA等格式 |
| setStrokeOpacity(opacity: number) | none | 設置矢量圖標線的透明度,opacity范圍0~1 |
| setFillOpacity(opacity: number) | none | 設置矢量圖標填充透明度,opacity范圍0~1 |
| setFillColor(color: string) | none | 設置矢量圖標的填充顏色。支持顏色常量字符串、十六進制、RGB、RGBA等格式 |
SymbolOptions
此類表示Symbol構造函數的可選參數。它沒有構造函數，但可通過對象字面量形式表示。
| 屬性 | 類型 | 描述 |
| anchor | Size | 符號的位置偏移值 |
| fillColor | string | 設置矢量圖標的填充顏色。支持顏色常量字符串、十六進制、RGB、RGBA等格式 |
| fillOpacity | Number | 設置矢量圖標填充透明度,范圍0~1 |
| scale | Number | 設置矢量圖標的縮放比例 |
| rotation | Number | 設置矢量圖標的旋轉角度,參數為角度 |
| strokeColor | string | 設置矢量圖標的線填充顏色,支持顏色常量字符串、十六進制、RGB、RGBA等格式 |
| strokeOpacity | Number | 設置矢量圖標線的透明度,opacity范圍0~1 |
| strokeWeight | Number | 旋設置線寬。如果此屬性沒有指定，則線寬跟scale數值相同 |
SymbolShapeType
此枚舉類型表示矢量圖標類預設的圖標樣式。
| 常量 | 描述 |
| BMap_Symbol_SHAPE_CIRCLE | 圓形，默認半徑為1px |
| BMap_Symbol_SHAPE_RECTANGLE | 矩形，默認寬度4px、高度2px |
| BMap_Symbol_SHAPE_RHOMBUS | 菱形，默認外接圓半徑10px |
| BMap_Symbol_SHAPE_STAR | 五角星，五角星外接圓半徑為10px |
| BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW | 箭頭方向向下的閉合箭頭 |
| BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW | 箭頭方向向上的閉合箭頭 |
| BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW | 箭頭方向向下的非閉合箭頭 |
| BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW | 箭頭方向向上的非閉合箭頭 |
| BMap_Symbol_SHAPE_POINT | 定位點圖標 |
| BMap_Symbol_SHAPE_PLANE | 預設的飛機形狀 |
| BMap_Symbol_SHAPE_CAMERA | 預設的照相機形狀 |
| BMap_Symbol_SHAPE_WARNING | 預設的警告符號 |
| BMap_Symbol_SHAPE_SMILE | 預設的笑臉形狀 |
| BMap_Symbol_SHAPE_CLOCK | 預設的鐘表形狀 |