Skip to main content

介紹

調用 new mapPlus.GeolocateControl(options)，開始使用地圖定位功能。

開始使用​

warning
  1. 除了在 http://127.0.0.1 或 localhost 進行開發，網頁必需使用 HTTPS 協議，才能存取現在位置。
  2. 使用者需「允許瀏覽器」存取現在的位置，並且也需要「允許該網站」存取現在位置。
  3. 並非所有瀏覽器都支援定位功能。
  • options (object)：選填，地圖定位的參數。
參數描述
options.trackUserLocation boolean選填，是否監視使用者的位置是否變更，預設為 false。
options.cameraUpdateRule 'force'、'initial'、'none'選填，鏡頭更新規則。'force' 為強制固定在使用者的位置，使用此設定，trackUserLocation 會自動設為 true；'initial' 為首次取得使用者位置並滑動至該位置；'none' 不會主動滑動至使用者位置。預設為 'initial'。
options.positionOptions object選填，位置設定，使用詳情請參考 Geolocation PositionOptions。
options.customizeMarker Marker選填，使用客製化 Marker 做為定位標示，詳情參考地標，預設為 null。
options.showAccuracyCircle boolean選填，是否顯示定位精度範圍，預設為 true。

範例

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  positionOptions: {
    // 使用高精度定位
    enableHighAccuracy: true,
  },
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );

鏡頭更新規則​

options.cameraUpdateRule 為鏡頭更新規則設定，可設定為以下三種：

規則描述
'force'強制固定在使用者的位置，使用此設定，trackUserLocation 會自動設為 true。
'initial'首次取得使用者位置並滑動至該位置，為預設。
'none'鏡頭不會主動滑動至使用者位置。

force​

強制固定在使用者的位置。

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  cameraUpdateRule: 'force',
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );

initial​

首次取得使用者位置並滑動至該位置。

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  cameraUpdateRule: 'initial',
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );

none​

鏡頭不會主動滑動至使用者位置。

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  cameraUpdateRule: 'none',
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );

顯示定位精度範圍​

options.showAccuracyCircle 可設是否顯示定位的精度範圍，預設為 true。

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  // 關閉精度範圍
  showAccuracyCircle: false,
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );

客製化定位標示​

options.customizeMarker 使用客製化 Marker 做為定位標示，預設為 null。

// 建立 Marker
const marker = new mapPlus.Marker({
  icon: 'https://kw3dmap.localking.com.tw/favicon.ico',
});

// 新增 GeolocateControl
const geolocateCtrl = new mapPlus.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true,
  },
  cameraUpdateRule: 'force',
  // 設定客製化定位標示
  customizeMarker: marker,
});
map.addControl( geolocateCtrl , 'bottom-right' );

// 地圖讀取完畢，即開始定位
map.on( 'style.load' , () => geolocateCtrl.trigger() );