將 ScribbleMaps 新增至您的應用程式

附註:

當您希望使用者登入 Scribble Maps、瀏覽其可用的地圖,並將地圖資料直接傳回您的網頁應用程式時,請使用 ScribbleMaps Connect Picker。

選擇器會在彈出視窗中開啟並在其中處理使用者登入流程,因此您的應用程式不需要直接收集 Scribble Maps 憑證。

Connect Picker 的運作方式

ScribbleMaps Connect Picker 讓您的使用者可以瀏覽、搜尋並從 Scribble Maps 選取地圖,然後以您選擇的格式將該地圖資料直接傳回您的應用程式。

當您希望使用者在 Scribble Maps 中建立或管理地理資料,然後將該資料載入您自己的應用程式,而無需自行建置地圖瀏覽器或登入流程時,這項功能非常實用。

使用案例 / 範例:

此整合適用於儀表板、房產工具、現場資料應用程式,以及其他需要使用者從 Scribble Maps 選取並載入地圖資料的網頁應用程式。

檢視目錄 ↑

取得您的 Client ID

開啟 Scribble Maps 開發者網站:
https://developers.scribblemaps.com
註冊一個免費專案。
複製您的 Client ID。

呼叫 Connect Picker 時會使用此值。

檢視目錄 ↑

將 SDK 新增至您的頁面

在您的網頁中,新增 Connect Picker SDK:

<script src="https://api.scribblemaps.com/connect/picker.js"></script>

儲存您的頁面變更。

您的應用程式現在即可使用 Scribble Maps Connect Picker。

檢視目錄 ↑

開啟 Connect Picker

從您的頁面呼叫 ScribbleMapsConnect.pick()。
傳入您的 clientId、您想要的匯出 format,以及 onSelect 回呼函式。

使用類似以下範例的程式碼:

ScribbleMapsConnect.pick({
  clientId: 'YOUR_CLIENT_ID',
  format: 'geojson',
  onSelect: function (result) {
    // result.data contains your GeoJSON
    // result.title, result.mapCode, result.thumbUrl also available
    loadIntoMyApp(result.data);
  }
});

選擇器開啟後,使用者即可進行驗證、瀏覽其可用的地圖並選取其中一張。

檢視目錄 ↑

處理所選的地圖資料

在 onSelect 回呼函式中,存取 result.data。

其中包含您所要求格式的地圖資料。
(選用)使用其他傳回的欄位:
- result.title — 地圖標題
- result.mapCode — Scribble Maps 地圖代碼
- result.thumbUrl — 地圖的縮圖 URL
將資料傳入您的應用程式邏輯。

例如,將傳回的 GeoJSON 載入您自己的地圖檢視器或資料工作流程。

檢視目錄 ↑

選用設定

您可以設定選擇器,使其更符合您應用程式的工作流程。

變更 format 值來選取匯出格式。

例如:geojson、kml、csv、gpx、dxf、shapefile 或 smjson。
使用 tabs 選項選擇使用者可瀏覽的地圖來源。

使用者可以瀏覽其個人資料庫、團隊共用地圖或社群收藏中的地圖。
(選用)使用隨附的按鈕樣式,以符合淺色或深色介面。

檢視目錄 ↑

支援的格式與傳回的欄位

支援的匯出格式:

GeoJSON

KML

CSV

GPX

DXF

Shapefile

SMJSON

傳回的結果欄位:

data

title

mapCode

thumbUrl

設定完成後,Connect Picker 會透過單一整合點,讓您的使用者直接從您的應用程式內存取其 Scribble Maps 資料。

目錄

Connect Picker 的運作方式

取得您的 Client ID

將 SDK 新增至您的頁面

開啟 Connect Picker

處理所選的地圖資料

選用設定

支援的格式與傳回的欄位

相關內容