最近公司某個項目用上了vue2.6+typescript的技術棧，整個工程都是用vue-cli3直接生成的，自帶了ts-loader來解析ts文件，非常方便。但是對於一些沒有沒有聲明文件的第三方模塊，用起來會比較麻煩，過程中，我們用到的高德地圖就是其中之一，雖然官方推薦使用vue-amap，但是想追求粒度更細的操作，還是原生的api更爲方便，下面來記錄一下全程的配置過程。
一、引入api文件
這裏推薦使用script標籤引入，因爲這種地圖類型的資源普遍都是運行時纔用到的，在生產環境中加載也不慢，沒必要放進去一起打包，所以用script標籤引入會是不錯的選擇：
在你工程的html模版中：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<title>xxx</title>
</head>
然後，爲了防止打包時把高德納入，我們需要在webpack中配置，這裏以vue.config文件爲例（和webpack的配置是一樣的，具體差別請看vue-cli文檔）：
module.exports = {
//額外的webpack配置使用一個回調函數來返回新的config
configureWebpack: config => {
config.externals = {'AMap': 'AMap'};
},
}
二、聲明文件
既然用了typescript，那麼就是想運用到它的類型提醒功能，那麼必不可少地需要引入高德地圖的聲明文件，由於官方也沒有給出，我們只能根據api文檔來自己書寫自己需要用到的函數聲明，下面是我們項目中大部分會用到的聲明，可以在src目錄下新建一個types文件夾專門用於存放聲明文件：
src/types/Amap.d.ts:
declare namespace AMap {
/**此對象用於表示地圖、覆蓋物、疊加層上的各種鼠標事件返回，包含以下字段：
高德的事件說明文檔有問題； 不是 LngLat 類，而是一個普通對象;
**/
export class MapsEvent {
/** 發生事件時光標所在處的經緯度座標 **/
public lnglat: { lng: number, lat: number };
/** 發生事件時光標所在處的像素座標 **/
public pixel: { x: number, y: number };
/** 事件類型。 **/
public type: string;
/** 發生事件的目標對象。 **/
public target: any;
}
/** 像素座標, 確定地圖上的一個像素點。 **/
export class Pixel {
/**構造一個像素座標對象。**/
constructor(x: number, y: number);
/**獲得X方向像素座標**/
public getX(): number;
/**獲得Y方向像素座標**/
public getY(): number;
/**當前像素座標與傳入像素座標是否相等**/
public equals(point: Pixel): boolean;
/**以字符串形式返回像素座標對象**/
public toString(): string;
}
/** 地物對象的像素尺寸 **/
export class Size {
/**構造尺寸對象。參數width: 寬度, height: 長度, 單位: 像素；**/
constructor(width: number, height: number);
/**獲得寬度。**/
public getWidth(): number;
/**獲得高度。**/
public getHeight(): number;
/**以字符串形式返回尺寸大小對象(自v1.2 新增)**/
public toString(): string;
}
/** 經緯度座標, 確定地圖上的一個點。 **/
export class LngLat {
/**構造一個地理座標對象, lng、lat分別代表經度、緯度值**/
constructor(lng: number, lat: number);
/**當前經緯度座標值經度移動w, 緯度移動s, 得到新的座標。經度向右移爲正值, 緯度向上移爲正值, 單位爲米。(自v1.2 新增)**/
public offset(w: number, s: number): LngLat;
/**當前經緯度和傳入經緯度或者經緯度數組連線之間的地面距離, 單位爲米 相關示例**/
public distance(lnglat: LngLat | Array<LngLat>): number;
/**獲取經度值。(自v1.2 新增)**/
public getLng(): number;
/**獲取緯度值。(自v1.2 新增)**/
public getLat(): number;
/**判斷當前座標對象與傳入座標對象是否相等**/
public equals(lnglat: LngLat): boolean;
/**LngLat對象以字符串的形式返回。**/
public toString(): string;
}
/** 地物對象的經緯度矩形範圍。 **/
export class Bounds {
/**矩形範圍的構造函數.參數southWest、northEast分別代表地物對象西南角經緯度和東北角經緯度值。**/
constructor(southWest: LngLat, northEast: LngLat);
/**指定點座標是否在矩形範圍內 相關示例**/
public contains(point: LngLat): boolean;
/**獲取當前Bounds的中心點經緯度座標。**/
public getCenter(): LngLat;
/**獲取西南角座標。**/
public getSouthWest(): LngLat;
/**獲取東北角座標**/
public getNorthEast(): LngLat;
/**以字符串形式返回地物對象的矩形範圍**/
public toString(): string;
}
/** MapOptions **/
export interface MapOptions {
/**地圖視口, 用於控制影響地圖靜態顯示的屬性, 如: 地圖中心點“center”推薦直接使用zoom、center屬性爲地圖指定級別和中心點(自v1.3 新增)**/
view?: View2D;
/**地圖圖層數組, 數組可以是圖層 中的一個或多個, 默認爲普通二維地圖。當疊加多個圖層時, 普通二維地圖需通過實例化一個TileLayer類實現(自v1.3 新增)**/
layers?: Array<any>;
/**地圖顯示的縮放級別, 若center與level未賦值, 地圖初始化默認顯示用戶所在城市範圍 3D地圖下, zoom值, 可以設置爲浮點數。(在V1.3.0版本level參數調整爲zoom, 3D地圖修改自V1.4.0開始生效)**/
zoom?: number;
/**地圖中心點座標值**/
center?: LngLat | number[];
/**3D模式下的地圖旋轉角度 */
rotation?: number;
/**地圖標註顯示順序, 大於110即可將底圖上的默認標註顯示在覆蓋物(圓、折線、面)之上。**/
labelzIndex?: number;
/**地圖顯示的縮放級別範圍在PC上, 默認爲[3, 18], 取值範圍[3-18]；在移動設備上, 默認爲[3, 19], 取值範圍[3-19]**/
zooms?: Array<any>;
/**地圖語言類型可選值: zh_cn: 中文簡體, en: 英文, zh_en: 中英文對照默認爲: zh_cn: 中文簡體注: 由於圖面內容限制, 中文、英文 、中英文地圖POI可能存在不一致的情況(自v1.3 新增)**/
lang?: string;
/**地圖默認鼠標樣式。參數defaultCursor應符合CSS的cursor屬性規範**/
defaultCursor?: string;
/**地圖顯示的參考座標系, 取值: 'EPSG3857''EPSG3395''EPSG4326'自V1.3.0移入view對象中**/
crs?: string;
/**地圖平移過程中是否使用動畫(如調用panBy、panTo、setCenter、setZoomAndCenter等函數, 將對地圖產生平移操作, 是否使用動畫平移的效果), 默認爲true, 即使用動畫**/
animateEnable?: boolean;
/**是否開啓地圖熱點, 默認false 不打開(自v1.3 新增)**/
isHotspot?: boolean;
/**當前地圖中默認顯示的圖層。默認圖層可以是TileLayer.Satellite等切片地圖, 也可以是通過TileLayer自定義的切片圖層(自v1.3 廢棄)**/
// defaultLayer?: TileLayer;
/**地圖是否可旋轉, 默認false。3D視圖默認爲true, 2D視圖默認false。(V1.3版本新增, 3D視圖自V1.4.0開始支持)**/
rotateEnable?: boolean;
/**是否監控地圖容器尺寸變化, 默認值爲false**/
resizeEnable?: boolean;
/**是否在有矢量底圖的時候自動展示室內地圖, PC端默認是true, 移動端默認是false**/
showIndoorMap?: boolean;
/**在展示矢量圖的時候自動展示室內地圖圖層, 當地圖complete之後可以獲取到該對象**/
// indoorMap?: IndoorMap;
/**是否支持可以擴展最大縮放級別, 和zooms屬性配合使用設置爲true的時候, zooms的最大級別在PC上可以擴大到20級, 移動端還是高清19/非高清20**/
expandZoomRange?: boolean;
/**地圖是否可通過鼠標拖拽平移, 默認爲true。此屬性可被setStatus/getStatus 方法控制**/
dragEnable?: boolean;
/**地圖是否可縮放, 默認值爲true。此屬性可被setStatus/getStatus 方法控制**/
zoomEnable?: boolean;
/**地圖是否可通過雙擊鼠標放大地圖, 默認爲true。此屬性可被setStatus/getStatus 方法控制**/
doubleClickZoom?: boolean;
/**地圖是否可通過鍵盤控制, 默認爲true方向鍵控制地圖平移, "+"和"-"可以控制地圖的縮放, Ctrl+“→”順時針旋轉, Ctrl+“←”逆時針旋轉。此屬性可被setStatus/getStatus 方法控制**/
keyboardEnable?: boolean;
/**地圖是否使用緩動效果, 默認值爲true。此屬性可被setStatus/getStatus 方法控制**/
jogEnable?: boolean;
/**地圖是否可通過鼠標滾輪縮放瀏覽, 默認爲true。此屬性可被setStatus/getStatus 方法控制**/
scrollWheel?: boolean;
/**地圖在移動終端上是否可通過多點觸控縮放瀏覽地圖, 默認爲true。關閉手勢縮放地圖, 請設置爲false。**/
touchZoom?: boolean;
/**可缺省, 當touchZoomCenter=1的時候, 手機端雙指縮放的以地圖中心爲中心, 否則默認以雙指中間點爲中心**/
touchZoomCenter?: number;
/**設置地圖的顯示樣式, 目前支持兩種地圖樣式: 第一種: 自定義地圖樣式, 如"amap: //styles/d6bf8c1d69cea9f5c696185ad4ac4c86"可前往地圖自定義平臺定製自己的個性地圖樣式；第二種: 官方樣式模版, 如"amap: //styles/grey"。其他模版樣式及自定義地圖的使用說明見開發指南**/
mapStyle?: string;
/**設置地圖上顯示的元素種類支持'bg'(地圖背景)、'point'(POI點)、'road'(道路)、'building'(建築物)**/
features?: Array<any>;
/**設置地圖顯示3D樓塊效果, 移動端也可使用。推薦使用。**/
showBuildingBlock?: boolean;
/**默認爲‘2D’, 可選’3D’, 選擇‘3D’會顯示 3D 地圖效果。(自V1.4.0開始支持)**/
viewMode?: string;
/**俯仰角度, 默認0, [0, 83], 2D地圖下無效 。(自V1.4.0開始支持)**/
pitch?: number;
/**是否允許設置俯仰角度, 3D視圖下爲true, 2D視圖下無效。(自V1.4.0開始支持)**/
pitchEnable?: boolean;
/**樓塊出現和消失的時候是否顯示動畫過程, 3D視圖有效, PC端默認true, 手機端默認false。(自V1.4.0開始支持)**/
buildingAnimation?: boolean;
/**調整天空顏色, 配合自定義地圖, 3D視圖有效, 如‘#ff0000’。(自V1.4.0開始支持)**/
skyColor?: string;
/**設置地圖的預加載模式, 開啓預加載的地圖會在適當時刻提前加載周邊和上一級的地圖數據, 優化使用體驗。該參數默認值true。 (自v1.4.4開始支持)**/
preloadMode?: boolean;
}
/** 地圖對象類, 封裝了地圖的屬性設置、圖層變更、事件交互等接口的類。相關示例 **/
export class Map {
/**構造一個地圖對象, 參數container中傳入地圖容器DIV的ID值或者DIV對象, opts地圖初始化參數對象, 參數詳情參看MapOptions列表。**/
constructor(container: string | HTMLDivElement, opts: MapOptions);
/**喚起高德地圖客戶端marker頁其中Object裏面包含有{ id: "B000A7BD6C", POIIDname: String, 必要參數location: LngLat|position屬性 必須參數}**/
public poiOnAMAP(obj: any): void;
/**喚起高德地圖客戶端marker詳情頁其中Object裏面包含有{ id: "B000A7BD6C", POIIDname: String, 必要參數location: LngLat|position屬性 必須參數}**/
public detailOnAMAP(obj: any): void;
/**獲取當前地圖縮放級別, 在PC上, 默認取值範圍爲[3, 18]；在移動設備上, 默認取值範圍爲[3-19]3D地圖會返回浮點數, 2D視圖爲整數。(3D地圖自V1.4.0開始支持)**/
public getZoom(): number;
/**獲取地圖圖層數組, 數組爲一個或多個圖層(自v1.3 新增)**/
public getLayers(): Array<any>;
/**獲取地圖中心點經緯度座標值。**/
public getCenter(): LngLat;
/**返回地圖對象的容器**/
public getContainer(): HTMLDivElement;
/**獲取地圖中心點所在區域, 回調函數返回對象屬性分別對應爲{省, 市, 區/縣}**/
public getCity(callback: (province: string, city: string, citycode: string, district: string) => void): void;
/**獲取當前地圖視圖範圍, 獲取當前可視區域。3D地圖下返回類型爲ArrayBounds, 2D地圖下仍返回Bounds 。(3D自V1.4.0開始支持)**/
public getBounds(): Bounds;
/**獲取當前地圖標註的顯示順序**/
public getLabelzIndex(): number;
/**獲取Map的限制區域**/
public getLimitBounds(): Bounds;
/**獲取底圖語言類型(自v1.3 新增)**/
public getLang(): string;
/**獲取地圖容器像素大小**/
public getSize(): Size;
/**獲取地圖順時針旋轉角度(自v1.3 新增)**/
public getRotation(): number;
/**獲取當前地圖狀態信息, 包括是否可鼠標拖拽移動地圖、地圖是否可縮放、地圖是否可旋轉(rotateEnable)、是否可雙擊放大地圖、是否可以通過鍵盤控制地圖旋轉(keyboardEnable)等**/
public getStatus(): any;
/**獲取地圖默認鼠標指針樣式**/
public getDefaultCursor(): string;
/**獲取指定位置的地圖分辨率, 單位: 米/像素。 參數point有指定值時, 返回指定點地圖分辨率, point缺省時, 默認返回當前地圖中心點位置的分辨率**/
public getResolution(point: LngLat): number;
/**獲取當前地圖比例尺。其值爲當前地圖中心點處比例尺值的倒數**/
public getScale(dpi: number): number;
/**設置地圖顯示的縮放級別, 在PC上, 參數zoom可設範圍: [3, 18]；在移動端: 參數zoom可設範圍: [3, 19]3D地圖下, 可將zoom設置爲浮點數。(3D自V1.4.0開始支持)**/
public setZoom(level: number): void;
/**設置地圖標註顯示的順序**/
public setlabelzIndex(index: number): void;
/**設置地圖圖層數組, 數組爲一個或多個圖層。當疊加多個圖層時, 普通二維地圖需通過實例化一個TileLayer類實現(自v1.3 新增)**/
public setLayers(layers: Array<any>): void;
/**添加地圖覆蓋物數組, 數組爲一個或多個覆蓋物。**/
public add(overlayers: Array<any>): void;
/**刪除地圖覆蓋物數組, 數組爲一個或多個覆蓋物。**/
public remove(overlayers: Array<any>): void;
/**返回添加的覆蓋物對象, 可選類型包括marker、circle、polyline、polygon； Type可缺省, 缺省時返回所有覆蓋物(marker、circle、polyline、polygon)。 返回結果不包含官方覆蓋物等, 比如定位marker, 周邊搜索圓等**/
public getAllOverlays(type: any): any;
/**設置地圖顯示的中心點**/
public setCenter(position: LngLat | number[]): void;
/**地圖縮放至指定級別並以指定點爲地圖顯示中心點**/
public setZoomAndCenter(zoomLevel: number, center: LngLat | number[]): void;
/**按照行政區名稱或adcode來設置地圖顯示的中心點。行政區名稱支持中國、省、市、區/縣名稱, 如遇重名的情況, 會按城市編碼表順序返回第一個。adcode請在城市編碼表中查詢。建議不要同時使用center/setCenter()和setCity(), 如一起使用程序將以setCity()作爲最後結果。 相關示例**/
public setCity(city: string, callback: Function): void;
/**指定當前地圖顯示範圍, 參數bounds爲指定的範圍**/
public setBounds(bound: Bounds): void;
/**設置Map的限制區域, 設定區域限制後, 傳入參數爲限制的Bounds。地圖僅在區域內可拖拽 相關示例**/
public setLimitBounds(bound: Bounds): void;
/**清除限制區域**/
public clearLimitBounds(): void;
/**設置地圖語言類型, 設置後底圖重新加載(自v1.3 新增)**/
public setLang(lang: string): string;
/**設置地圖順時針旋轉角度, 旋轉原點爲地圖容器中心點, 取值範圍 [0-360](自v1.3 新增)**/
public setRotation(rotation: number): number;
/**設置當前地圖顯示狀態, 包括是否可鼠標拖拽移動地圖、地圖是否可縮放、地圖是否可旋轉(rotateEnable)、是否可雙擊放大地圖、是否可以通過鍵盤控制地圖旋轉(keyboardEnable)等 相關示例**/
public setStatus(status: any): void;
/**設置鼠標指針默認樣式, 參數cursor應符合CSS的cursor屬性規範。可爲CSS標註中的光標樣式, 如: setCursor(“pointer”)等；或者自定義的光標樣式, 如: setCursor("url('http: //http://lbs.amap.com/webapi/static/Images//0.png'), pointer")**/
public setDefaultCursor(cursor: string): void;
/**地圖放大一級顯示**/
public zoomIn(): void;
/**地圖縮小一級顯示**/
public zoomOut(): void;
/**地圖中心點平移至指定點位置**/
public panTo(positon: LngLat): void;
/**以像素爲單位, 沿x方向和y方向移動地圖, x向右爲正, y向下爲正**/
public panBy(x: number, y: number): void;
/**根據地圖上添加的覆蓋物分佈情況, 自動縮放地圖到合適的視野級別, 參數overlayList默認爲當前地圖上添加的所有覆蓋物圖層**/
public setFitView(overlayList: Array<any>): void;
/**刪除地圖上所有的覆蓋物**/
public clearMap(): void;
/**註銷地圖對象, 並清空地圖容器**/
public destroy(): void;
/**插件加載方法。參數name中指定需要加載的插件類型, 同時加載多個插件時, 以字符串數組的形式添加。在Callback回調函數中進行地圖插件的創建、插件事件的綁定等操作；插件爲地圖功能的擴展, 按需加載；插件寫作方法, 請參考相關示例。**/
public plugin(name: string | Array<any>, callback: Function): void;
/**添加控件。參數可以是插件列表中的任何插件對象, 如: ToolBar、OverView、Scale等**/
public addControl(obj: any): void;
/**移除地圖上的指定控件**/
public removeControl(obj: any): void;
/**清除地圖上的信息窗體。**/
public clearInfoWindow(): void;
/**平面地圖像素座標轉換爲地圖經緯度座標 相關示例**/
public pixelToLngLat(pixel: Pixel, level: number): LngLat;
/**地圖經緯度座標轉換爲平面地圖像素座標**/
public lnglatToPixel(lngLat: LngLat, level: number): Pixel;
/**地圖容器像素座標轉爲地圖經緯度座標 相關示例**/
public containerToLngLat(pixel: Pixel): LngLat;
/**地圖經緯度座標轉爲地圖容器像素座標**/
public lngLatToContainer(lnglat: LngLat): Pixel;
/**設置地圖的顯示樣式, 目前支持兩種地圖樣式: 第一種: 自定義地圖樣式, 如"amap: //styles/d6bf8c1d69cea9f5c696185ad4ac4c86"可前往地圖自定義平臺定製自己的個性地圖樣式；第二種: 官方樣式模版, 如"amap: //styles/grey"。其他模版樣式及自定義地圖的使用說明見開發指南**/
public setMapStyle(style: string): void;
/**獲取地圖顯示樣式**/
public getMapStyle(): string;
/**設置地圖上顯示的元素種類, 支持bg(地圖背景)、point(興趣點)、road(道路)、building(建築物)**/
public setFeatures(feature: Array<any>): void;
/**獲取地圖顯示元素種類**/
public getFeatures(): Array<any>;
/**修改底圖圖層(自v1.3 廢棄)**/
// setDefaultLayer (layer: TileLayer): void;
/**設置俯仰角, 3D視圖有效(自V1.4.0開始支持)**/
public setPitch(Number: any): void;
/**獲取俯仰角(自V1.4.0開始支持)**/
public getPitch(): number;
/**
* 綁定事件聲明
*/
public on(event: string, callback: Function): void;
}
/** View2DOptions **/
export interface View2DOptions {
/**地圖中心點座標值**/
center?: LngLat;
/**地圖順時針旋轉角度, 取值範圍 [0-360], 默認值: 0**/
rotation?: number;
/**地圖顯示的縮放級別。若center與zoom未賦值, 地圖初始化默認顯示用戶所在城市範圍**/
zoom?: number;
/**地圖顯示的參考座標系, 取值: 'EPSG3857''EPSG3395''EPSG4326'默認值: 'EPSG3857'**/
crs?: string;
}
/** 二維地圖顯示視口, 用於定義二維地圖靜態顯示屬性, 如地圖縮放級別“zoom”、地圖中心點“center”等。 **/
export class View2D {
/**構造一個二維地圖顯示視口對象, opts二維地圖視口對象初始化屬性, 詳見View2Doptions**/
constructor(opt: View2DOptions);
}
/** MarkerOptions **/
export interface MarkerOptions {
/**要顯示該marker的地圖對象**/
map?: Map;
/**點標記在地圖上顯示的位置, 默認爲地圖中心點**/
position?: LngLat|number[];
/**點標記顯示位置偏移量, 默認值爲Pixel(-10, -34)。Marker指定position後, 默認以marker左上角位置爲基準點, 對準所給定的position位置, 若需使marker指定位置對準在position處, 需根據marker的尺寸設置一定的偏移量。**/
offset?: Pixel;
/**需在點標記中顯示的圖標。可以是一個本地圖標地址, 或者Icon對象。有合法的content內容時, 此屬性無效**/
icon?: string | Icon;
/**點標記顯示內容, 可以是HTML要素字符串或者HTML DOM對象。content有效時, icon屬性將被覆蓋**/
content?: string | any;
/**鼠標點擊時marker是否置頂, 默認false , 不置頂
* (自v1.3 新增)**/
topWhenClick?: boolean;
/**是否將覆蓋物的鼠標或touch等事件冒泡到地圖上
* (自v1.3 新增) 默認值: false**/
bubble?: boolean;
/**設置點標記是否可拖拽移動, 默認爲false**/
draggable?: boolean;
/**設置拖拽點標記時是否開啓點標記離開地圖的效果**/
raiseOnDrag?: boolean;
/**指定鼠標懸停時的鼠標樣式, 自定義cursor, IE僅支持cur/ani/ico格式, Opera不支持自定義cursor**/
cursor?: string;
/**點標記是否可見, 默認爲true**/
visible?: boolean;
/**點標記的疊加順序。地圖上存在多個點標記疊加時, 通過該屬性使級別較高的點標記在上層顯示 默認zIndex: 100**/
zIndex?: number;
/**點標記的旋轉角度, 廣泛用於改變車輛行駛方向 注: angle屬性是使用CSS3來實現的, 支持IE9及以上版本**/
angle?: number;
/**是否自動旋轉。點標記在使用moveAlong動畫時, 路徑方向若有變化, 點標記是否自動調整角度, 默認爲false。廣泛用於自動調節車輛行駛方向。 IE8以下不支持旋轉, autoRotation屬性無效**/
autoRotation?: boolean;
/**點標記的動畫效果, 默認值: “AMAP_ANIMATION_NONE”
* 可選值:
* “AMAP_ANIMATION_NONE”, 無動畫效果
* “AMAP_ANIMATION_DROP”, 點標掉落效果
* “AMAP_ANIMATION_BOUNCE”, 點標彈跳效果**/
animation?: string;
/**點標記陰影, 不設置該屬性則點標記無陰影**/
shadow?: Icon;
/**鼠標滑過點標記時的文字提示, 不設置則鼠標滑過點標無文字提示**/
title?: string;
/**點標記是否可點擊**/
clickable?: boolean;
/**設置Marker的可點擊區域, 在定義的區域內可觸發Marker的鼠標點擊事件**/
shape?: MarkerShape;
/**用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
extData?: any;
/**添加文本標註, content爲文本標註的內容, offset爲偏移量, 左上角爲偏移量爲(0, 0)**/
label?: { content: string, offset: LngLat };
}
/** Marker類 **/
export class Marker {
/**構造一個點標記對象, 通過MarkerOptions設置點標記對象的屬性**/
constructor(opt: MarkerOptions);
/**喚起高德地圖客戶端標註頁其中Object裏面包含有{ name: String, name屬性 必要參數 position:
* LngLat 座標點 }**/
public markOnAMAP(obj: any): void;
/**獲取Marker偏移量
* (自v1.3 新增)**/
public getOffset(): Pixel;
/**設置Marker偏移量
* (自v1.3 新增)**/
public setOffset(offset: Pixel): void;
/**設置點標記的動畫效果, 默認值: “AMAP_ANIMATION_NONE”
* 可選值:
* “AMAP_ANIMATION_NONE”, 無動畫效果
* “AMAP_ANIMATION_DROP”, 點標掉落效果
* “AMAP_ANIMATION_BOUNCE”, 點標彈跳效果**/
public setAnimation(animate: string): void;
/**獲取點標記的動畫效果類型**/
public getAnimation(): string;
/**設置點標記是支持鼠標單擊事件**/
public setClickable(clickable: boolean): void;
/**獲取點標記是否支持鼠標單擊事件**/
public getClickable(): boolean;
/**獲取點標記的位置**/
public getPosition(): LngLat;
/**設置點標記位置**/
public setPosition(lnglat: LngLat): void;
/**設置點標記的旋轉角度**/
public setAngle(angle: number): void;
/**設置點標記文本標籤內容相關示例**/
public setLabel(label: any): void;
/**獲取點標記文本標籤內容**/
public getLabel(): any;
/**獲取點標記的旋轉角度**/
public getAngle(): number;
/**設置點標記的疊加順序, 默認最先添加的點標記在最底層**/
public setzIndex(index: number): void;
/**獲取點標記的疊加順序**/
public getzIndex(): number;
/**設置點標記的顯示圖標。 參數image可傳入String、Icon兩種類型的值。
* 若爲String(圖片url), 表示點標記以指定圖片形式顯示；若爲Icon, 表示點標記以Icon對象形式顯示**/
public setIcon(content: string | Icon): void;
/**當點標記未自定義圖標時, 獲取Icon內容**/
public getIcon(): string
| Icon;
/**設置點標記對象是否可拖拽移動**/
public setDraggable(draggable: boolean): void;
/**獲取點標記對象是否可拖拽移動**/
public getDraggable(): boolean;
/**點標記隱藏**/
public hide(): void;
/**點標記顯示**/
public show(): void;
/**設置鼠標懸停時的光標。 參數cur可爲CSS標註中的光標樣式, 如:
* setCursor(“pointer”)等；或者自定義的光標樣式, 如:
* setCursor("url('http: //http://webapi.amap.com/images/0.png') , pointer")
* 注: 當瀏覽器不支持css2, url值不起作用, 鼠標樣式就按pointer來設置**/
public setCursor(Cursor: any): string;
/**設置點標記顯示內容, 可以是HTML要素字符串或者HTML DOM對象**/
public setContent(html: string | HTMLDivElement): void;
/**獲取點標記內容**/
public getContent(): string;
/**以指定的速度, 點標記沿指定的路徑移動。參數path爲路徑座標串；speed爲指定速度, 單位: 千米/小時； 回調函數f爲變化曲線函數, 缺省爲function(k){return k}；參數circlable表明是否循環執行動畫, 默認爲false**/
public moveAlong(path: Array<any>, speed: number,
f: Function, circlable: boolean): void;
/**以給定速度移動點標記到指定位置。參數lnglat爲指定位置, 必設；speed爲指定速度, 單位: 千米/小時；回調函數f爲變化曲線函數, 缺省爲function(k){return k}。**/
public moveTo(lnglat: LngLat, speed: number,
f: Function): void;
/**點標記停止動畫**/
public stopMove(): void;
/**暫定點標記的動畫效果**/
public pauseMove(): void;
/**重新開始點標記的動畫效果**/
public resumeMove(): void;
/**爲Marker指定目標顯示地圖。當參數值取null時, 地圖上移除當前Marker: setMap(null)**/
public setMap(map?: Map|null): void;
/**獲取Marker所在地圖對象**/
public getMap(): Map;
/**鼠標滑過點標時的文字提示**/
public setTitle(title: string): void;
/**獲取點標記的文字提示**/
public getTitle(): string;
/**地圖上有多個marker時, 當isTop爲true時, marker將顯示在最前面；當爲false時, marker取消置頂**/
public setTop(isTop: boolean): void;
/****/
public getTop(): boolean;
/**爲marker設置陰影效果**/
public setShadow(icon: Icon): void;
/**獲取marker的陰影圖標**/
public getShadow(): Icon;
/**設置marker的可點擊區域**/
public setShape(shape: MarkerShape): void;
/**獲取marker的可點擊區域**/
public getShape(): MarkerShape;
/**設置用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
public setExtData(ext: any): void;
/**獲取用戶自定義屬性**/
public getExtData(): any;
}
/** MarkerShapeOptions **/
export interface MarkerShapeOptions {
/**可點擊區域組成元素數組, 存放圖形的像素座標等信息, 該數組元素由type決定: - circle: coords格式爲 [x1, y1, r], x1, y1爲圓心像素座標, r爲圓半徑 - poly: coords格式爲 [x1, y1, x2, y2 … xn, yn], 各x, y表示多邊形邊界像素座標 - rect: coords格式爲 [x1, y1, x2, y2], x1, y1爲矩形左上角像素座標, x2, y2爲矩形右下角像素座標 Markshape的像素座標是指相對於marker的左上角的像素座標偏移量**/
coords?: Array<number>;
/**可點擊區域類型, 可選值: - circle: 圓形 - poly: 多邊形 - rect: 矩形**/
type?: string;
}
/** MarkerShape **/
export class MarkerShape {
/**構造一個Marker可點擊區域對象, 通過MarkerShapeOptions設置可點擊區域屬性**/
constructor(opt: MarkerShapeOptions);
}
/** IconOptions **/
export interface IconOptions {
/**圖標尺寸, 默認值(36, 36)**/
size?: Size;
/**圖標取圖偏移量。當image中指定了一個大圖時, 可通過size和imageOffset配合, 顯示圖標的指定範圍**/
imageOffset?: Pixel;
/**圖標的取圖地址。默認爲藍色圖釘圖片**/
image?: string;
/**圖標所用圖片大小, 根據所設置的大小拉伸或壓縮圖片, 等同於CSS中的background-size屬性。可用於實現高清屏的高清效果**/
imageSize?: Size;
}
/** MarkerShape **/
export class Icon {
/**構造點覆蓋物圖標, 通過IconOptions設置圖標屬性**/
constructor(opt: IconOptions);
/**獲取圖標圖片大小**/
public getImageSize(): Size;
/**設置圖標圖片大小**/
public setImageSize(size: Size): void;
}
/** ElasticMarkerOptions **/
export interface ElasticMarkerOptions {
/**多個不同樣式的數組, 每個樣式形如:
*{
* icon: {
* img: './a, png',
* size: [16, 16], //圖標的原始大小
* ancher: [8, 16], //錨點, 圖標原始大小下錨點所處的位置, 相對左上角
* imageOffset: [360, 340],
* //可缺省, 當使用精靈圖時可用, 標示圖標在整個圖片中左上角的位置
* imageSize: [512, 512],
* //可缺省, 當使用精靈圖時可用, 整張圖片的大小
* fitZoom: 14, //最合適的級別, 在此級別下顯示爲原始大小
* scaleFactor: 2, //地圖放大一級的縮放比例係數
* maxScale: 2, //最大放大比例
* minScale: 1//最小放大比例
* },
* label: {
* content: '標記1', //文本內容
* position: 'BM', //文本位置相對於圖標的基準點,
* //BL、BM、BR、ML、MR、TL、TM、TR分別代表左下角、底部中央、右下角、
* //左側中央、右側中央、左上角、頂部中央、右上角。
* //缺省時代表相對圖標的錨點位置
* offset: [-35, 0], //相對position的偏移量
* minZoom: 15//label的最小顯示級別
* }
*}**/
styles?: Array<any>;
/**表示地圖級別與styles中樣式對應關係的映射, 如: {
* 14: 0,
* 15: 0,
* 16: 1,
* 17: 1,
* 18: 1,
* 19: 1,
* 20: 1
* } 表示14到15級使用styles中的第0個樣式, 16-20級使用第二個樣式**/
zoomStyleMapping?: any;
/**要顯示該標記的地圖對象**/
map?: Map;
/**點標記在地圖上顯示的位置, 默認爲地圖中心點**/
position?: LngLat;
/**鼠標點擊時marker是否置頂, 默認false , 不置頂
* (自v1.3 新增)**/
topWhenClick?: boolean;
/**是否將覆蓋物的鼠標或touch等事件冒泡到地圖上
* (自v1.3 新增) 默認值: false**/
bubble?: boolean;
/**設置點標記是否可拖拽移動, 默認爲false**/
draggable?: boolean;
/**指定鼠標懸停時的鼠標樣式, 自定義cursor, IE僅支持cur/ani/ico格式, Opera不支持自定義cursor**/
cursor?: string;
/**點標記是否可見, 默認爲true**/
visible?: boolean;
/**點標記的疊加順序。地圖上存在多個點標記疊加時, 通過該屬性使級別較高的點標記在上層顯示 默認zIndex: 100**/
zIndex?: number;
/**點標記是否可點擊**/
clickable?: boolean;
/**用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
extData?: any;
}
/** 靈活點標記, 一種可以隨着地圖級別變化而改變圖標和大小的點標記, 插件類。查看示例 **/
export class ElasticMarker {
/**構造一個靈活點標記對象, 通過ElasticMarkerOptions設置點標記對象的屬性**/
constructor(opt: ElasticMarkerOptions);
/**喚起高德地圖客戶端標註頁其中Object裏面包含有{ name: String, name屬性 必要參數 position:
* LngLat 座標點 }**/
public markOnAMAP(obj: any): void;
/**設置點標記是支持鼠標單擊事件**/
public setClickable(clickable: boolean): void;
/**獲取點標記是否支持鼠標單擊事件**/
public getClickable(): boolean;
/**獲取點標記的位置**/
public getPosition(): LngLat;
/**設置點標記位置**/
public setPosition(lnglat: LngLat): void;
/**設置點標記的疊加順序, 默認最先添加的點標記在最底層**/
public setzIndex(index: number): void;
/**獲取點標記的疊加順序**/
public getzIndex(): number;
/**設置點標記對象是否可拖拽移動**/
public setDraggable(draggable: boolean): void;
/**獲取點標記對象是否可拖拽移動**/
public getDraggable(): boolean;
/**點標記隱藏**/
public hide(): void;
/**點標記顯示**/
public show(): void;
/**設置鼠標懸停時的光標。 參數cur可爲CSS標註中的光標樣式, 如:
* setCursor(“pointer”)等；或者自定義的光標樣式, 如:
* setCursor("url('http: //http://webapi.amap.com/images/0.png') , pointer")
* 注: 當瀏覽器不支持css2, url值不起作用, 鼠標樣式就按pointer來設置**/
public setCursor(Cursor: any): string;
/**爲Marker指定目標顯示地圖。當參數值取null時, 地圖上移除當前Marker: setMap(null)**/
public setMap(map: Map): void;
/**獲取Marker所在地圖對象**/
public getMap(): Map;
/**鼠標滑過點標時的文字提示**/
public setTitle(title: string): void;
/**獲取點標記的文字提示**/
public getTitle(): string;
/**地圖上有多個marker時, 當isTop爲true時, marker將顯示在最前面；當爲false時, marker取消置頂**/
public setTop(isTop: boolean): void;
/****/
public getTop(): boolean;
/**設置用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
public setExtData(ext: any): void;
/**獲取用戶自定義屬性**/
public getExtData(): any;
}
/** TextOptions **/
export interface TextOptions {
/**標記顯示的文本內容**/
text?: string;
/**橫向位置, 'left' 'right', 'center'可選**/
textAlign?: string;
/**縱向位置, 'top' 'middle', 'bottom'可選**/
verticalAlign?: string;
/**要顯示該標記的地圖對象**/
map?: Map;
/**點標記在地圖上顯示的位置, 默認爲地圖中心點**/
position?: LngLat;
/**點標記顯示位置偏移量, 默認值爲Pixel(-10, -34)。Marker指定position後, 默認以marker左上角位置爲基準點, 對準所給定的position位置, 若需使marker指定位置對準在position處, 需根據marker的尺寸設置一定的偏移量。**/
offset?: Pixel;
/**鼠標點擊時是否置頂, 默認false , 不置頂**/
topWhenClick?: boolean;
/**是否將覆蓋物的鼠標或touch等事件冒泡到地圖上
* 默認值: false**/
bubble?: boolean;
/**設置點標記是否可拖拽移動, 默認爲false**/
draggable?: boolean;
/**設置拖拽點標記時是否開啓點標記離開地圖的效果**/
raiseOnDrag?: boolean;
/**指定鼠標懸停時的鼠標樣式, 自定義cursor, IE僅支持cur/ani/ico格式, Opera不支持自定義cursor**/
cursor?: string;
/**點標記是否可見, 默認爲true**/
visible?: boolean;
/**點標記的疊加順序。地圖上存在多個點標記疊加時, 通過該屬性使級別較高的點標記在上層顯示 默認zIndex: 100**/
zIndex?: number;
/**點標記的旋轉角度, 廣泛用於改變車輛行駛方向 注: angle屬性是使用CSS3來實現的, 支持IE9及以上版本**/
angle?: number;
/**是否自動旋轉。點標記在使用moveAlong動畫時, 路徑方向若有變化, 點標記是否自動調整角度, 默認爲false。廣泛用於自動調節車輛行駛方向。 IE8以下不支持旋轉, autoRotation屬性無效**/
autoRotation?: boolean;
/**點標記的動畫效果, 默認值: “AMAP_ANIMATION_NONE”
* 可選值:
* “AMAP_ANIMATION_NONE”, 無動畫效果
* “AMAP_ANIMATION_DROP”, 點標掉落效果
* “AMAP_ANIMATION_BOUNCE”, 點標彈跳效果**/
animation?: string;
/**點標記陰影, 不設置該屬性則點標記無陰影**/
shadow?: Icon;
/**鼠標滑過點標記時的文字提示, 不設置則鼠標滑過點標無文字提示**/
title?: string;
/**點標記是否可點擊**/
clickable?: boolean;
/**用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
extData?: any;
}
/** 純文本標記, 繼承自Marker, 具有Marker的大部分屬性、方法和事件(v1.4.2新增) **/
export class Text {
/**構造一個點標記對象, 通過TextOptions設置點標記對象的屬性**/
constructor(opt: TextOptions);
/**獲取文本內容**/
public getText(): string;
/**修改文本內容**/
public setText(String: any): void;
/**設置文本樣式, Object同css樣式表, 如: {'background-color': 'red'}**/
public setStyle(Object: any): void;
/**喚起高德地圖客戶端標註頁其中Object裏面包含有{ name: String, name屬性 必要參數 position:
* LngLat 座標點 }**/
public markOnAMAP(obj: any): void;
/**獲取偏移量**/
public getOffset(): Pixel;
/**設置偏移量**/
public setOffset(offset: Pixel): void;
/**設置點標記的動畫效果, 默認值: “AMAP_ANIMATION_NONE”
* 可選值:
* “AMAP_ANIMATION_NONE”, 無動畫效果
* “AMAP_ANIMATION_DROP”, 點標掉落效果
* “AMAP_ANIMATION_BOUNCE”, 點標彈跳效果**/
public setAnimation(animate: string): void;
/**獲取點標記的動畫效果類型**/
public getAnimation(): string;
/**設置點標記是支持鼠標單擊事件**/
public setClickable(clickable: boolean): void;
/**獲取點標記是否支持鼠標單擊事件**/
public getClickable(): boolean;
/**獲取點標記的位置**/
public getPosition(): LngLat;
/**設置點標記位置**/
public setPosition(lnglat: LngLat): void;
/**設置點標記的旋轉角度**/
public setAngle(angle: number): void;
/**獲取點標記的旋轉角度**/
public getAngle(): number;
/**設置點標記的疊加順序, 默認最先添加的點標記在最底層**/
public setzIndex(index: number): void;
/**獲取點標記的疊加順序**/
public getzIndex(): number;
/**設置點標記對象是否可拖拽移動**/
public setDraggable(draggable: boolean): void;
/**獲取點標記對象是否可拖拽移動**/
public getDraggable(): boolean;
/**點標記隱藏**/
public hide(): void;
/**點標記顯示**/
public show(): void;
/**設置鼠標懸停時的光標。 參數cur可爲CSS標註中的光標樣式, 如:
* setCursor(“pointer”)等；或者自定義的光標樣式, 如:
* setCursor("url('http: //http://webapi.amap.com/images/0.png') , pointer")
* 注: 當瀏覽器不支持css2, url值不起作用, 鼠標樣式就按pointer來設置**/
public setCursor(Cursor: any): string;
/**以指定的速度, 點標記沿指定的路徑移動。參數path爲路徑座標串；speed爲指定速度, 單位: 千米/小時； 回調函數f爲變化曲線函數, 缺省爲function(k){return k}；參數circlable表明是否循環執行動畫, 默認爲false**/
public moveAlong(path: Array<any>, speed: number,
f: Function, circlable: boolean): void;
/**以給定速度移動點標記到指定位置。參數lnglat爲指定位置, 必設；speed爲指定速度, 單位: 千米/小時；回調函數f爲變化曲線函數, 缺省爲function(k){return k}。**/
public moveTo(lnglat: LngLat, speed: number,
f: Function): void;
/**點標記停止動畫**/
public stopMove(): void;
/**暫定點標記的動畫效果**/
public pauseMove(): void;
/**重新開始點標記的動畫效果**/
public resumeMove(): void;
/**爲Marker指定目標顯示地圖。當參數值取null時, 地圖上移除當前Marker: setMap(null)**/
public setMap(map: Map): void;
/**獲取Marker所在地圖對象**/
public getMap(): Map;
/**鼠標滑過點標時的文字提示**/
public setTitle(title: string): void;
/**獲取點標記的文字提示**/
public getTitle(): string;
/**地圖上有多個marker時, 當isTop爲true時, marker將顯示在最前面；當爲false時, marker取消置頂**/
public setTop(isTop: boolean): void;
/****/
public getTop(): boolean;
/**設置陰影效果**/
public setShadow(icon: Icon): void;
/**獲取陰影圖標**/
public getShadow(): Icon;
/**設置用戶自定義屬性, 支持JavaScript API任意數據類型, 如Marker的id等**/
public setExtData(ext: any): void;
/**獲取用戶自定義屬性**/
public getExtData(): any;
}
/** PolylineOptions **/
export interface PolylineOptions {
/**要顯示該polyline的地圖對象**/
map?: Map;
/**折線覆蓋物的疊加順序。默認疊加順序, 先添加的線在底層, 後添加的線在上層。通過該屬性可調整疊加順序, 使級別較高的折線覆蓋物在上層顯示 默認zIndex: 50**/
zIndex?: number;
/**是否將覆蓋物的鼠標或touch等事件冒泡到地圖上
* (自v1.3 新增) 默認值: false**/
bubble?: boolean;
/**指定鼠標懸停時的鼠標樣式, 自定義cursor, IE僅支持cur/ani/ico格式, Opera不支持自定義cursor**/
cursor?: string;
/**是否繪製成大地線, 默認false相關示例**/
geodesic?: boolean;
/**線條是否帶描邊, 默認false**/
isOutline?: boolean;
/**描邊的寬度, 默認爲1**/
borderWeight?: number;
/**線條描邊顏色, 此項僅在isOutline爲true時有效, 默認: #000000**/
outlineColor?: string;
/**折線的節點座標數組**/
path?: Array<any>;
/**線條顏色, 使用16進制顏色代碼賦值。默認值爲#006600**/
strokeColor?: string;
/**線條透明度, 取值範圍[0, 1], 0表示完全透明, 1表示不透明。默認爲0.9**/
strokeOpacity?: number;
/**線條寬度, 單位: 像素**/
strokeWeight?: number;
/**線樣式, 實線: solid, 虛線: dashed**/
strokeStyle?: string;
/**勾勒形狀輪廓的虛線和間隙的樣式, 此屬性在strokeStyle 爲dashed 時有效, 此屬性在ie9+瀏覽器有效 取值:
* 實線: [0, 0, 0] 虛線: [10, 10] , [10, 10] 表示10個像素的實線和10個像素的空白(如此反覆)組成的虛線 點畫線: [10, 2, 10], [10, 2, 10] 表示10個像素的實線和2個像素的空白 + 10個像素的實線和10個像素的空白 (如此反覆)組成的虛線**/
strokeDasharray?: Array<any>;
/**折線拐點的繪製樣式, 默認值爲'miter'尖角, 其他可選值: 'round'圓角、'bevel'斜角**/
lineJoin?: string;
/**折線兩端線帽的繪製樣式, 默認值爲'butt'無頭, 其他可選值: 'round'圓頭、'square'方頭**/
lineCap?: string;
/**設置折線是否可拖拽移動, 默認爲false**/
draggable?: boolean;
/**用戶自定義屬性, 支持JavaScript API任意數據類型, 如Polyline的id等**/
extData?: any;
/**是否延路徑顯示白色方向箭頭, 默認false。Canvas繪製時有效, 建議折線寬度大於6時使用；在3D視圖下不支持顯示方向箭頭(自V1.4.0版本參數效果變更)**/
showDir?: boolean;
}
/** Polyline類 **/
export class Polyline {
/**構造折線對象, 通過PolylineOptions指定折線樣式**/
constructor(opt: PolylineOptions);
/**設置組成該折線的節點數組**/
public setPath(path: Array<any>): void;
/**獲取折線路徑的節點數組。其中lat和lng是經緯度參數。**/
public getPath(): Array<any>;
/**修改折線屬性(包括路徑的節點、線樣式、是否繪製大地線等。屬性詳情參看PolylineOptions列表)**/
public setOptions(opt: PolylineOptions): void;
/**獲取線的屬性**/
public getOptions(): any;
/**獲取折線的總長度(單位: 米)**/
public getLength(): number;
/**獲取當前折線的矩形範圍對象**/
public getBounds(): Bounds;
/**地圖上隱藏指定折線**/
public hide(): void;
/**地圖上顯示指定折線**/
public show(): void;
/**設置折線所在的地圖。參數map即爲目標地圖, 參數爲null時, 在地圖上移除當前折線**/
public setMap(map: Map): void;
/**設置用戶自定義屬性, 支持JavaScript API任意數據類型, 如Polyline的id等**/
public setExtData(ext: any): void;
/**獲取用戶自定義屬性**/
public getExtData(): any;
}
/**
* 多邊形繪製的配置項接口
*/
export interface PolygonOption {
/** 要顯示該polygon的地圖對象 */
map?: Map;
/** 多邊形覆蓋物的疊加順序。地圖上存在多個多邊形覆蓋物疊加時，
通過該屬性使級別較高的多邊形覆蓋物在上層顯示。 默認zIndex：10
*/
zIndex?: number;
/** 組成多邊形的點集合，格式：[[113.2323,23.2323],[122.33333,44.232323],[...]] */
path: Array<number[]>;
/** 是否將覆蓋物的鼠標或touch等事件冒泡到地圖上, 默認值：false*/
bubble?: boolean;
/** 指定鼠標懸停時的鼠標樣式，自定義cursor，IE僅支持cur/ani/ico格式，Opera不支持自定義cursor */
cursor?: string;
/** 線條的繪製顏色 ,如：'#FF33FF' */
strokeColor?: string;
/** 線條的繪製寬度， 如：6 */
strokeWeight?: number;
/** 線條的透明度，區間[0,1],如：0.5 */
strokeOpacity?: number;
/** 多邊形內容的透明度，如：0.7 */
fillOpacity?: number;
/** 多邊形的填充顏色，如:'#1791fc' */
fillColor?: string;
/** 設置多邊形是否可拖拽移動，默認爲false */
draggable?: boolean;
/** 用戶自定義屬性，支持JavaScript API任意數據類型，如Polygon的id等 */
extData?: any;
/** 輪廓線樣式，實線:solid，虛線:dashed */
strokeStyle?: string;
/** 勾勒形狀輪廓的虛線和間隙的樣式，此屬性在strokeStyle 爲dashed 時有效
* 實線：[0,0,0]
* 虛線：[10,10] ，[10,10] 表示10個像素的實線和10個像素的空白（如此反覆）組成的虛線
* 點畫線：[10,2,10]， [10,2,10] 表示10個像素的實線和2個像素的空白 + 10個像素的實線和10個像素的空白 （如此反覆）組成的虛線
*/
strokeDasharray?: Array<number>;
/** 是否繪製完後自動跳轉到 */
autoSetView?: boolean;
}
/**
* Polygon類
*/
export class Polygon {
/** 以PolygonOption作爲構建函數的配置項 */
constructor(opt: PolygonOption)
/** 設置多邊形輪廓線節點數組，當爲“環”多邊形時，path爲二維數組，數組元素爲多邊形輪廓線的節點座標數組 */
public setPath(path: Array<number[]|LngLat>): void;
/** 獲取多邊形輪廓線節點數組。其中lat和lng是經緯度參數 */
public getPath(): Array<any>;
/** 修改多邊形屬性（樣式風格，包括組成多邊形輪廓線的節點、輪廓線樣式等。屬性詳情參看PolygonOptions列表） */
public setOptions(opt: PolygonOption): void;
/** 獲取多邊形的屬性 */
public getOptions(): any;
/** 獲取當前多邊形的矩形範圍對象 */
public getBounds( ): Bounds;
/** 獲取多邊形的面積（單位：平方米） */
public getArea( ): number;
/** 隱藏多邊形 */
public hide(): void;
/** 顯示多邊形 */
public show(): void;
/** 在指定地圖上顯示當前的多邊形。參數取值爲null時，在地圖上移除當前多邊形 */
public setMap(map: Map): void;
/** 設置用戶自定義屬性，支持JavaScript API任意數據類型，如Polygon的id等 */
public setExtData(ext: any): any;
/** 獲取用戶自定義屬性 */
public getExtData( ): any;
/** 判斷指定點座標是否在多邊形範圍內 */
public contains(point: LngLat | number[]): boolean;
}
/**
* InfoWindow配置項接口
*/
export interface InfoWindowOption {
/** 是否自定義窗體。設爲true時，信息窗體外框及內容完全按照content所設的值添加 */
isCustom?: boolean;
/** 是否自動調整窗體到視野內 */
autoMove?: boolean;
/** 控制是否在鼠標點擊地圖後關閉信息窗體，默認false，鼠標點擊地圖後不關閉信息窗體 */
closeWhenClickMap?: boolean;
/** 顯示內容，可以是HTML要素字符串或者HTMLElement對象 */
content?: string | HTMLElement;
/** 信息窗體尺寸（isCustom爲true時，該屬性無效） */
size?: Size;
/** 信息窗體錨點。默認值：'bottom-center';可選值：'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right' */
anchor?: string;
/** 信息窗體顯示位置偏移量。默認基準點爲信息窗體的底部中心 */
offset?: Pixel;
/** 信息窗體顯示基點位置 */
position?: number[];
/** Boolean 控制是否顯示信息窗體陰影，取值false時不顯示窗體陰影，取值true時顯示窗體陰影 */
showShadow?: boolean;
/** 信息窗體關閉時，是否將其Dom元素從頁面中移除，默認爲false */
retainWhenClose?: boolean;
}
/**
* InfoWindow類
*/
export class InfoWindow {
/** 構建信息窗體對象，使用InfoWindowOption的配置項 */
constructor(opt: InfoWindowOption);
/** 在地圖的指定位置打開信息窗體 */
public open(map: Map, pos: AMap.LngLat|number[]): void;
/** 關閉信息窗體 */
public close(): void;
/** 獲取信息窗體是否打開 */
public getIsOpen( ): boolean;
/** 設置信息窗體內容，可通過該函數動態更新信息窗體中的信息 */
public setContent(content: string | HTMLElement): void;
/** 獲取信息窗體內容 ，結果以字符串方式返回 */
public getContent( ): string;
/** 設置信息窗體顯示基點位置 */
public setPosition(lnglat: LngLat): void;
/** 獲取信息窗體顯示基點位置 */
public getPosition( ): LngLat | number[];
/** 獲取信息窗體錨點 */
public getAnchor( ): string;
/** 設置信息窗體錨點
可選值：'top-left'|'top-center'|'top-right'|'middle-left'|
'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'
*/
public setAnchor(anchor: string ): void;
/** 設置信息窗體大小（isCustom爲false時有效） */
public setSize(size: Size): void;
/** 獲取信息窗體大小 */
public getSize( ): Size;
}
}
當然，如果按照以上的目錄建了聲明文件，那麼我們需要在tsconfig中也做對應配置：
tsconfig.json:
"include": [
"types",
"src/**/*.d.ts",
"src/**/*.ts",
]
三、使用高德地圖
由於我們採用了script標籤以及利用了命名空間在全局聲明瞭AMap這個類，因此在任何組件中，我們都可以直接使用new AMap.map()來生成一個高德地圖的實例