mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,417 @@
|
||||
---
|
||||
name: Location Services
|
||||
description: Geolocation, map operations, and location-based services
|
||||
---
|
||||
|
||||
# Location Services
|
||||
|
||||
## Get Current Location
|
||||
|
||||
### uni.getLocation
|
||||
|
||||
Get current geographic location.
|
||||
|
||||
```javascript
|
||||
uni.getLocation({
|
||||
type: 'wgs84', // wgs84/gcj02 (gcj02 for map display)
|
||||
altitude: false, // Include altitude
|
||||
geocode: false, // Include address info (App)
|
||||
highAccuracyExpireTime: 3000, // High accuracy timeout
|
||||
success: (res) => {
|
||||
console.log('Latitude:', res.latitude)
|
||||
console.log('Longitude:', res.longitude)
|
||||
console.log('Speed:', res.speed)
|
||||
console.log('Accuracy:', res.accuracy)
|
||||
// App only:
|
||||
console.log('Altitude:', res.altitude)
|
||||
console.log('Address:', res.address)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('Location failed:', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**Response Properties:**
|
||||
|
||||
| Property | Type | Description |
|
||||
|----------|------|-------------|
|
||||
| latitude | Number | Latitude |
|
||||
| longitude | Number | Longitude |
|
||||
| speed | Number | Speed (m/s) |
|
||||
| accuracy | Number | Accuracy (meters) |
|
||||
| altitude | Number | Altitude (meters) |
|
||||
| verticalAccuracy | Number | Vertical accuracy |
|
||||
| horizontalAccuracy | Number | Horizontal accuracy |
|
||||
| address | Object | Address info (App) |
|
||||
|
||||
### uni.getFuzzyLocation (WeChat)
|
||||
|
||||
Get approximate location (better privacy, faster).
|
||||
|
||||
```javascript
|
||||
uni.getFuzzyLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
console.log(res.latitude, res.longitude)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Choose Location
|
||||
|
||||
### uni.chooseLocation
|
||||
|
||||
Open map to select location.
|
||||
|
||||
```javascript
|
||||
uni.chooseLocation({
|
||||
latitude: 39.9,
|
||||
longitude: 116.4,
|
||||
keyword: 'restaurant',
|
||||
success: (res) => {
|
||||
console.log('Name:', res.name)
|
||||
console.log('Address:', res.address)
|
||||
console.log('Latitude:', res.latitude)
|
||||
console.log('Longitude:', res.longitude)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Open Location
|
||||
|
||||
### uni.openLocation
|
||||
|
||||
Open external map app.
|
||||
|
||||
```javascript
|
||||
uni.openLocation({
|
||||
latitude: 39.9,
|
||||
longitude: 116.4,
|
||||
name: 'Destination Name',
|
||||
address: 'Full address here',
|
||||
scale: 18
|
||||
})
|
||||
```
|
||||
|
||||
## Location Change Monitoring
|
||||
|
||||
### uni.startLocationUpdate
|
||||
|
||||
Start background location updates.
|
||||
|
||||
```javascript
|
||||
uni.startLocationUpdate({
|
||||
type: 'gcj02',
|
||||
success: () => {
|
||||
console.log('Location updates started')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.startLocationUpdateBackground
|
||||
|
||||
Start background location (requires permission).
|
||||
|
||||
```javascript
|
||||
uni.startLocationUpdateBackground({
|
||||
type: 'gcj02',
|
||||
success: () => {
|
||||
console.log('Background location started')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Listen for Location Changes
|
||||
|
||||
```javascript
|
||||
uni.onLocationChange((res) => {
|
||||
console.log('Location updated:', res.latitude, res.longitude)
|
||||
})
|
||||
|
||||
// Stop listening
|
||||
uni.offLocationChange(callback)
|
||||
```
|
||||
|
||||
### Stop Location Updates
|
||||
|
||||
```javascript
|
||||
uni.stopLocationUpdate({
|
||||
success: () => {
|
||||
console.log('Location updates stopped')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Map Component
|
||||
|
||||
### Basic Map
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<map
|
||||
id="myMap"
|
||||
style="width: 100%; height: 300px;"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:scale="14"
|
||||
:markers="markers"
|
||||
:polyline="polyline"
|
||||
:circles="circles"
|
||||
:show-location="true"
|
||||
@markertap="onMarkerTap"
|
||||
@regionchange="onRegionChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
title: 'Marker 1',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30,
|
||||
callout: {
|
||||
content: 'Hello',
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
display: 'BYCLICK'
|
||||
}
|
||||
}],
|
||||
polyline: [{
|
||||
points: [
|
||||
{ latitude: 39.909, longitude: 116.39742 },
|
||||
{ latitude: 39.91, longitude: 116.4 }
|
||||
],
|
||||
color: '#FF0000',
|
||||
width: 2,
|
||||
dottedLine: false
|
||||
}],
|
||||
circles: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
radius: 100,
|
||||
strokeWidth: 2,
|
||||
fillColor: '#FF000020'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Map Context Operations
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
onReady() {
|
||||
this.mapContext = uni.createMapContext('myMap')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Get center location
|
||||
getCenter() {
|
||||
this.mapContext.getCenterLocation({
|
||||
success: (res) => {
|
||||
console.log('Center:', res.latitude, res.longitude)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// Move to location
|
||||
moveToLocation() {
|
||||
this.mapContext.moveToLocation({
|
||||
latitude: 39.9,
|
||||
longitude: 116.4
|
||||
})
|
||||
},
|
||||
|
||||
// Translate marker
|
||||
translateMarker() {
|
||||
this.mapContext.translateMarker({
|
||||
markerId: 1,
|
||||
destination: {
|
||||
latitude: 39.91,
|
||||
longitude: 116.41
|
||||
},
|
||||
autoRotate: true,
|
||||
rotate: 0,
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
|
||||
// Include points in view
|
||||
includePoints() {
|
||||
this.mapContext.includePoints({
|
||||
points: [
|
||||
{ latitude: 39.9, longitude: 116.4 },
|
||||
{ latitude: 39.91, longitude: 116.41 }
|
||||
],
|
||||
padding: [10, 10, 10, 10]
|
||||
})
|
||||
},
|
||||
|
||||
// Get region
|
||||
getRegion() {
|
||||
this.mapContext.getRegion({
|
||||
success: (res) => {
|
||||
console.log('Southwest:', res.southwest)
|
||||
console.log('Northeast:', res.northeast)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// Add markers
|
||||
addMarkers() {
|
||||
this.mapContext.addMarkers({
|
||||
markers: [{
|
||||
id: 2,
|
||||
latitude: 39.91,
|
||||
longitude: 116.41,
|
||||
title: 'New Marker'
|
||||
}],
|
||||
clear: false // Don't clear existing
|
||||
})
|
||||
},
|
||||
|
||||
// Remove markers
|
||||
removeMarkers() {
|
||||
this.mapContext.removeMarkers({
|
||||
markerIds: [1, 2]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Coordinate Systems
|
||||
|
||||
| System | Description | Usage |
|
||||
|--------|-------------|-------|
|
||||
| WGS84 | GPS coordinates | International standard |
|
||||
| GCJ02 | Mars coordinates | China national standard |
|
||||
| BD09 | Baidu coordinates | Baidu Map only |
|
||||
|
||||
**Note:** For map display in China, use `gcj02`.
|
||||
|
||||
## Permission Configuration
|
||||
|
||||
### Mini-Program
|
||||
|
||||
Add to `manifest.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-weixin": {
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "Your location is needed to find nearby stores"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": [
|
||||
"getLocation",
|
||||
"chooseLocation"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### App (Android)
|
||||
|
||||
```json
|
||||
{
|
||||
"app-plus": {
|
||||
"distribute": {
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### App (iOS)
|
||||
|
||||
```json
|
||||
{
|
||||
"app-plus": {
|
||||
"distribute": {
|
||||
"ios": {
|
||||
"privacyDescription": {
|
||||
"NSLocationWhenInUseUsageDescription": "Location is needed to find nearby stores",
|
||||
"NSLocationAlwaysUsageDescription": "Background location is needed for navigation"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Permission Handling
|
||||
|
||||
```javascript
|
||||
async function getLocationWithPermission() {
|
||||
try {
|
||||
// Check permission
|
||||
const setting = await uni.getSetting()
|
||||
if (!setting.authSetting['scope.userLocation']) {
|
||||
// Request permission
|
||||
await uni.authorize({ scope: 'scope.userLocation' })
|
||||
}
|
||||
|
||||
// Get location
|
||||
const res = await uni.getLocation({ type: 'gcj02' })
|
||||
return res
|
||||
} catch (err) {
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: 'Permission Required',
|
||||
content: 'Please enable location permission in settings',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
throw err
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Distance Calculation
|
||||
|
||||
```javascript
|
||||
function calculateDistance(lat1, lon1, lat2, lon2) {
|
||||
const R = 6371 // Earth's radius in km
|
||||
const dLat = (lat2 - lat1) * Math.PI / 180
|
||||
const dLon = (lon2 - lon1) * Math.PI / 180
|
||||
const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
|
||||
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
||||
Math.sin(dLon/2) * Math.sin(dLon/2)
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
|
||||
return R * c // Distance in km
|
||||
}
|
||||
```
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/location/location.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/location/location-change.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/location/open-location.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/map.md
|
||||
-->
|
||||
Reference in New Issue
Block a user