介紹

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

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

開始使用

  • 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。

範例

js
// 新增 GeolocateControlconst 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

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

js
// 新增 GeolocateControlconst geolocateCtrl = new mapPlus.GeolocateControl({  cameraUpdateRule: 'force',});map.addControl( geolocateCtrl , 'bottom-right' );
// 地圖讀取完畢，即開始定位map.on( 'style.load' , () => geolocateCtrl.trigger() );

initial

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

js
// 新增 GeolocateControlconst geolocateCtrl = new mapPlus.GeolocateControl({  cameraUpdateRule: 'initial',});map.addControl( geolocateCtrl , 'bottom-right' );
// 地圖讀取完畢，即開始定位map.on( 'style.load' , () => geolocateCtrl.trigger() );

none

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

js
// 新增 GeolocateControlconst geolocateCtrl = new mapPlus.GeolocateControl({  cameraUpdateRule: 'none',});map.addControl( geolocateCtrl , 'bottom-right' );
// 地圖讀取完畢，即開始定位map.on( 'style.load' , () => geolocateCtrl.trigger() );

顯示定位精度範圍

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

js
// 新增 GeolocateControlconst geolocateCtrl = new mapPlus.GeolocateControl({  // 關閉精度範圍  showAccuracyCircle: false,});map.addControl( geolocateCtrl , 'bottom-right' );
// 地圖讀取完畢，即開始定位map.on( 'style.load' , () => geolocateCtrl.trigger() );

客製化定位標示

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

js
// 建立 Markerconst marker = new mapPlus.Marker({  icon: 'https://kw3dmap.localking.com.tw/favicon.ico',});
// 新增 GeolocateControlconst geolocateCtrl = new mapPlus.GeolocateControl({  positionOptions: {    enableHighAccuracy: true,  },  cameraUpdateRule: 'force',  // 設定客製化定位標示  customizeMarker: marker,});map.addControl( geolocateCtrl , 'bottom-right' );
// 地圖讀取完畢，即開始定位map.on( 'style.load' , () => geolocateCtrl.trigger() );