uniapp中如何使用地图定位功能

1. 介绍

uniapp是一款跨平台开发框架，支持使用vue语法编写。它可以将同一份代码打包成多个平台的应用程序，如微信小程序、支付宝小程序、H5等。在开发过程中，经常需要使用地图的定位功能。本篇文章将介绍在uniapp中如何使用地图定位功能。

2. 准备

2.1. 获取百度地图的开发者Key

在使用百度地图的API之前，需要申请一个开发者Key。具体申请步骤如下：

1. 登录百度地图开放平台，进入应用管理页面。

2. 点击“创建应用”按钮，输入应用名称和所属行业。

3. 进入应用详情页面，找到“密钥管理”模块，并记录下AK值。

2.2. 安装uniapp插件

uniapp提供了一个插件uni-app-plus-baidumap，通过该插件可以方便地使用百度地图的API。安装方法如下：

1. 在uniapp项目的根目录下执行命令：npm install uni-app-plus-baidumap --save

2. 在App.vue文件中引入插件，并配置AK值。

import baidumap from '@/uni_modules/uni-app-plus-baidumap/js_sdk/baidumap.js'
Vue.prototype.$baidumap = baidumap
// 配置AK值
baidumap.ak = '你的AK值'

3. 在manifest.json文件的“app-plus”——“uni-app-plus-baidumap”——“permissions”属性中添加定位权限。

"app-plus": {
    "uni-app-plus-baidumap": {
        "permissions": {
            "android": {
                "features": [
                    {
                        "name": "android.permission.ACCESS_COARSE_LOCATION"
                    },
                    {
                        "name": "android.permission.ACCESS_FINE_LOCATION"
                    }
                ]
            },
            "ios": {
                "description": "定位服务",
                "usageDescription": "需要使用定位服务"
            }
        }
    }
}

3. 使用

3.1. 获取当前位置

可以使用uniapp提供的wx.getLocation接口获取当前位置。该接口支持wgs84坐标系和gcj02坐标系。在使用之前，需要先判断用户是否已经授权定位权限。

// 获取当前位置
uni.getLocation({
    geocode: true,
    success: res => {
        const {longitude, latitude} = res.coords
        console.log(longitude, latitude)
        // 经度：longitude，纬度：latitude
    },
    fail: () => {
        uni.showToast({
            title: '获取定位失败',
            icon: 'none'
        })
    }
})

3.2. 显示地图

可以使用uniapp提供的map组件显示地图。该组件提供了多种属性，例如：id、latitude、longitude、scale等。

<map id="myMap"
    :latitude="latitude"
    :longitude="longitude"
    :scale="scale"
    :markers="markers"
></map>
export default {
    data() {
        return {
            latitude: 0,
            longitude: 0,
            scale: 18,
            markers: []
        }
    },
    onReady() {
        this.getCityLocation()
    },
    methods: {
        // 获取城市的经纬度
        async getCityLocation() {
            const result = await this.$baidumap.getCityLocation('上海市')
            const {lng, lat} = result.center
            this.latitude = lat
            this.longitude = lng
            this.markers = [
                {
                    id: 1,
                    latitude: lat,
                    longitude: lng,
                    callout: {
                        content: '上海市'
                    }
                }
            ]
        }
    }
}

3.3. 搜索位置

可以使用uniapp提供的input组件和button组件实现位置搜索功能。通过调用百度地图的API，可以查询到符合条件的位置列表。在选择位置之后，还可以将位置的经纬度传递给map组件，实现地图定位。

<template>
    <view class="container">
        <input placeholder="请输入搜索内容" v-model="searchText"></input>
        <button @click="search">搜索</button>
        <view class="result-list">
            <view class="item" v-for="item in searchResult" :key="item.uid" @click="selectLocation(item)">
                <view class="name">{{item.name}}</view>
                <view class="address">{{item.address}}</view>
            </view>
        </view>
        <map id="myMap"
            :latitude="latitude"
            :longitude="longitude"
            :scale="scale"
            :markers="markers"
        ></map>
    </view>
</template>
<script>
export default {
    data() {
        return {
            latitude: 0,
            longitude: 0,
            scale: 18,
            markers: [],
            searchText: '',
            searchResult: []
        }
    },
    methods: {
        async search() {
            const result = await this.$baidumap.search({
                query: this.searchText,
                region: '全国'
            })
            this.searchResult = result.poiList.pois
        },
        selectLocation(location) {
            const {lng, lat} = location.point
            this.latitude = lat
            this.longitude = lng
            this.markers = [
                {
                    id: 1,
                    latitude: lat,
                    longitude: lng,
                    callout: {
                        content: location.name
                    }
                }
            ]
        }
    }
}
</script>

4. 总结

本篇文章介绍了在uniapp中使用地图定位功能的方法，包括获取当前位置、显示地图、搜索位置等。通过使用uni-app-plus-baidumap插件，可以方便地调用百度地图的API。在开发过程中，还可以自定义map组件的样式，实现更加丰富的地图效果。