# rollup start dev
npm run dev
# vue3 demo start
cd ./example/vue3
npm run serve
class GMap {
/**
* 以 mapId 取得地圖實例
*/
static getMap(mapId: string): google.maps.Map | undefined;
private static idGMmapInsMap;
/**
* 建立基本地圖,需要加載依賴 : MarkerLibrary、MapsLibrary、CoreLibrary
* 可建立多個地圖實例 以 mapId 識別
*/
static createMap(
mapDiv: HTMLElement,
opts: google.maps.MapOptions & {
mapId: string;
}
): Promise<google.maps.Map | undefined>;
/**
* 移動 給定 地圖實例 到 指定的 位置
*/
static flyTo(
map: google.maps.Map,
latLngLiteral: google.maps.LatLngLiteral
): void;
}
// 建立地圖
const gMapIns = await GMap.createMap(DOM, {
mapId: "uuid",
center: { lat: 25.03746, lng: 121.564558 },
clickableIcons: false,
disableDefaultUI: true,
zoom: 12,
});
// marker 所需要的 資料結構
interface IMarkerOption {
id: string;
position: google.maps.LatLngLiteral;
/** 建立真實節點的渲染方法,@return 節點 */
renderer: (
root: HTMLElement
) => [HTMLDivElement, (i: GMapAdvancedMarkers) => void];
panOffset?: number[];
}
interface IGMapAdvancedMarkersOpts extends IMarkerOption {
isNotDrawingOnMap: boolean;
onClick?: (ins: GMapAdvancedMarkers) => void;
}
"rollup-plugin-dts": "^4.2.1", // 自動生成 ts 的型別定義擋
"rollup-plugin-esbuild": "^4.9.1" // 編譯 ts 成現代 ESmodule