How to implement map positioning and surrounding query in uniapp

How to implement map positioning and surrounding query in uniapp

With the development of mobile Internet, map positioning and surrounding query have become one of the common needs of many applications . In uniapp, it is relatively simple to implement map positioning and surrounding queries. This article will introduce how to use native map components and related APIs to implement map positioning and surrounding query functions in uniapp.

1. Map positioning

Map positioning refers to obtaining the longitude and latitude coordinates of the current device location. In uniapp, we can use the uni.getLocation function to implement map positioning. First, introduce the uni.getLocation function in the page that needs to use map positioning:

import uni from 'uni-location'

Then call the uni.getLocation function at the appropriate time to obtain the longitude and latitude coordinates of the current device:

// 获取当前设备的经纬度坐标
uni.getLocation({
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    console.log('纬度：' + latitude + '，经度：' + longitude)
  }
})

In the above code , the uni.getLocation function will return an object containing the current device location information. The longitude and latitude coordinates of the current device location can be obtained through res.latitude and res.longitude.

2. Map display

After we have the latitude and longitude coordinates, we can use the native map component provided by uniapp to display the map. First, introduce the map component into the page that needs to use the map:

<uni-map id="map" :latitude="latitude" :longitude="longitude" :scale="14" :show-location="true" style="width: 100%; height: 400rpx;"></uni-map>

In the above code, we use the uni-map component and set the relevant properties. The id attribute is "map", and latitude and longitude are the obtained longitude and latitude coordinates respectively. The scale attribute is used to set the map zoom level, the default is 14, and the show-location attribute is used to set whether to display the current location mark, the default is true. The style attribute is used to set the display size of the map.

3. Surrounding query

The surrounding query of the map in uniapp can be realized by calling the relevant API. Here, we take querying surrounding POIs (points of interest) as an example. First, you need to configure the apiKey of the map service in the manifest.json file of uniapp. This apiKey can be applied for and obtained on the developer platform.

Find the corresponding public part in the manifest.json file and add the following code:

"mp": {
  "config": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于地图定位"
      }
    }
  },
  "requireCustomRoutes": true,
  "usingComponents": {
    "uni-map": "@dcloudio/uni-ui/lib/uni-map/uni-map"
  }
},
"h5": {
  "publicPath": "/",
  "staticDirectory": "static",
  "webpackChain": {},
  "webpackDevServer": {},
  "enableLinter": false
},
"qrcode": {
  "title": "uni-demo",
  "path": "pages/index/index",
  "width": 430,
  "autoColor": true
},
"appid": "tourist"

Then, introduce the uni.getLocation and uni.request functions into the page where surrounding queries are required:

import uni from 'uni-location'
import uniRequest from 'uni-request'

Next, we can obtain the latitude and longitude coordinates of the current device location through the uni.getLocation function, and then use the uni.request function to send a request to the map-related API to query the surrounding POIs. The following is a sample code:

uni.getLocation({
  success: function (res) {
    var latitude = res.latitude
    var longitude = res.longitude
    uni.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      data: {
        keyword: '美食',
        location: latitude + ',' + longitude,
        radius: 1000,
        key: '地图服务的apiKey'
      },
      success: function (res) {
        console.log(res.data)
        // 在这里处理查询结果
      }
    })
  }
})

In the above sample code, we send a request to the map service API by setting parameters such as url, data and key, and the query keyword is "food" and the radius is 1000 meters. Points of Interest. After success, the query results will be returned, and we can process these results in the success callback function.

Through the above steps, it can be relatively simple to implement map positioning and surrounding queries in uniapp. By obtaining the latitude and longitude coordinates, we can display the current device location on the map and query surrounding POIs through the API. You can also freely use and modify the code according to actual needs to implement more map functions.

The above is the detailed content of How to implement map positioning and surrounding query in uniapp. For more information, please follow other related articles on the PHP Chinese website!