更新记录

1.6.1（2024-12-02）

修复安卓端，vivo手机开始持续定位时报错的bug

1.6.0（2024-11-29）

修复ios打包失败问题

1.5.9（2024-11-29）

修复安卓端多个页面有地图时，假设ab两个页面都有地图，从a进入b页面，再返回a页面时marker都消失了的问题

平台兼容性

pow-amapall

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

高德定位、地图、导航全功能插件，功能持续增加中

• 支持驾车导航，步行导航，骑行导航
• 支持类似微信的在地图上选择位置的功能（在示例项目中chooseLocation.nvue）
• 支持地图展示折现/标记点及气泡，多个标记点可以同时展示气泡
• 支持单次定位和持续定位功能
• 支持定位权限请求
• 支持逆地理信息搜索、附近的 POI 搜索，根据关键字进行 POI 搜索功能
• 支持tts功能（安卓端使用高德导航组件，ios端使用系统自带）

使用步骤

1. 申请高德key
2. 导入本插件
3. 打自定义基座
4. 高德key通过setAmapKey方法传入插件，并且调用隐私协议方法amapPrivacyDidShow和amapUserDidAgreePrivacy
5. 调用定位、导航、地图、TTS相关方法

项目支持

• 支持uniapp 项目和 uniappx 项目
• 本页示例项目是 uniapp 示例项目
• uniappx 示例项目地址： https://gitcode.com/qqbuy/pow-amapall-uniappx

导航回调信息

• 导航过程中有信息回调 回调内容参考 pow-uts导航回调信息

示例页面一：定位、导航、TTS功能、POI 搜索功能

<template>
    <view class="container">
        <view class="title">定位权限</view>
        <button @click="jianchadingweiquanxian">申请定位权限</button>
        <view class="title">定位功能</view>
        <button @click="getOnceLocation">高德单次定位</button>
        <button @click="startLocation">开始持续后台定位</button>
        <button @click="stopLocation">结束持续后台定位</button>
        <view class="title">地图功能</view>
        <button @click="gotoMapView">进入地图页面</button>
        <button @click="gotoChooseLocation">选择地址</button>
        <view class='title'>离线地图-无需自己开发页面</view>
        <button @click="gotoOffline">进入高德自带离线地图页面</button>
        <view class='title'>离线地图-接口-用于自己后台管理</view>
        <button @click="kexiazaiCities">获取支持离线地图的城市列表</button>
        <button @click="xiazaiCity">下载某个城市</button>
        <button @click="xiazaijinduCity">检查城市下载进度</button>
        <button @click="xinbanbenCity">检查城市是否有新版本离线包</button>
        <button @click="shanchuCity">删除某个已下载的城市</button>
        <view class="title">导航功能</view>
        <button @click="daohang">开始高德导航</button>
        <view class="title">TTS功能</view>
        <input class="voice-input" placeholder="播放文字" :value="ttsText" @input="inputTTSText" />
        <button @click="readTTS">播放上面的文字</button>
        <view class="title">搜索功能</view>
        <button @click="searchRegeocode">搜索逆地理信息</button>
        <button @click="searchPoiNearby">搜索附近的poi</button>
        <button @click="searchPoiWithKeyword">根据关键字搜索poi</button>
        <view class="title">其他功能</view>
        <button @click="zuobiaozhuanhuan">坐标转换</button>
    </view>
</template>

<script>
    import {
        amapPrivacyDidShow,
        amapUserDidAgreePrivacy,
        setAmapKey,
        getAmapLocation,
        startAmapLocation,
        stopAmapLocation,
        startAmapNavi,
        amapTTS,
        manageOfflineMap,
        checkAndRequestLocationPermission,
        searchAmapRegeocode,
        searchAmapPoisNearby,
        searchAmapPoisWithKeywords,
        addMarkerToAmapNavi, //注意：必须在导航页面弹出来之后调用才能生效。
        removeMarkerFromAmapNavi,
        removeAllMarkersFromAmapNavi,
        offlineMapCities,
        offlineMapDownloadCity,
        offlineMapCityDownloadPercent,
        offlineMapCityHasNewVersion,
        offlineMapDeleteCity,
        amapCoordFromOtherCoord
    } from '@/uni_modules/pow-amapall'

    export default {
        data() {
            return {
                ttsText: '我是文字转语音,支持英语,hello'
            }
        },
        onReady() {
            uni.setNavigationBarTitle({
                title: '高德demo'
            })

            amapPrivacyDidShow()
            amapUserDidAgreePrivacy()
            setAmapKey('2d3da96f1736d9403288c6ed95a5e85f', '72566fdc715020e355f355e4d9b7ceb1') // 参数依次是ioskey、安卓key

        },
        methods: {
            zuobiaozhuanhuan(){
                //把其他坐标系的坐标,转成高德坐标
                let from = 'baidu' // baidu、gps、mapbar、aliyun、google、sosomap、mapabc 只支持小写
                let lat = 29.579084
                let lon = 114.230751
                let amapCoord = amapCoordFromOtherCoord(from, lat, lon)
                uni.showToast({
                    title: `高德坐标:${JSON.stringify(amapCoord)}`,
                    icon: 'none',
                })

            },
            shanchuCity(){
                //把offlineMapCities获取到的城市的name传入
                // 不加回调，ios高德没给回调
                offlineMapDeleteCity('合肥市')
            },
            xinbanbenCity(){
                offlineMapCityHasNewVersion('合肥市', res=>{
                    uni.showToast({
                        title: `是否有新版本:${JSON.stringify(res)}`,
                        icon: 'none',
                        duration: 1000,
                        mask: true ,
                    })
                })
            },
            xiazaiCity(){
                //把offlineMapCities获取到的城市的name传入，如果本地已经有了该城市，就不会再次下载
                offlineMapDownloadCity('合肥市')
            },
            xiazaijinduCity(){
                // 0-100，0表示未开始下载，100表示下载完成，-1表示没有这个城市
                // 这个接口ios暂时不可用
                offlineMapCityDownloadPercent('合肥市', res=>{
                    let percent = res['percent']
                    uni.showToast({
                        title: `下载进度:${percent}`,
                        icon: 'none',
                        duration: 1000,
                        mask: true ,
                    })

                }) 
            },
            kexiazaiCities() {
                offlineMapCities(res=>{
                    let citiesArray = res['list']
                    let toastTitle = '支持下载的城市个数:' + citiesArray.length
                    uni.showToast({
                        title: toastTitle,
                        icon:'none'
                    })
                    if(citiesArray.length == 0) return
                    let firstCity = citiesArray[0]
                    console.log(`某个城市：${JSON.stringify(firstCity)}`);
                })
            },
            searchRegeocode() {
                uni.showLoading()
                searchAmapRegeocode(
                    31.96875, //纬度
                    118.798039, //经度
                    res => {
                        uni.hideLoading()
                        console.log('逆地理信息:', JSON.stringify(res))
                        uni.showToast({
                            title: `逆地理信息:${res.address}`,
                            icon: 'none',
                        })
                    })
            },
            searchPoiNearby() {
                uni.showLoading()
                searchAmapPoisNearby(
                    31.96875, //纬度
                    118.798039, //经度
                    1000, //搜索半径
                    res => {
                        uni.hideLoading()
                        console.log('附近的poi:', JSON.stringify(res))
                        uni.showToast({
                            title: `附近的poi:${res.pois.length}个`,
                            icon: 'none',
                        })

                    })
            },
            searchPoiWithKeyword() {
                uni.showLoading()
                searchAmapPoisWithKeywords(
                    '餐厅', //关键字
                    '南京', //城市
                    res => {
                        uni.hideLoading()
                        console.log('关键字搜索poi:', JSON.stringify(res))
                        uni.showToast({
                            title: `关键字搜索poi:${res.pois.length}个`,
                            icon: 'none',
                        })
                    })
            },
            jianchadingweiquanxian() {
                checkAndRequestLocationPermission((res) => {
                    console.log(`请求权限结果:${JSON.stringify(res)}`)
                    uni.showToast({
                        title: `请求权限结果:${res.msg}`,
                        icon: 'none'
                    })
                })
            },
            gotoOffline() {
                manageOfflineMap()
            },
            gotoMapView() {
                uni.navigateTo({
                    url: './mapview'
                })
            },
            gotoChooseLocation() {
                uni.navigateTo({
                    url: './chooseLocation',
                    events: {
                        chooseLocation: (res) => {
                            console.log('用户选择的地址:', JSON.stringify(res))
                        }
                    }
                })
            },
            inputTTSText(e) {
                console.log('输入了文字：', e.detail.value)
                this.ttsText = e.detail.value
            },
            readTTS() {
                if (this.ttsText == '') {
                    uni.showToast({
                        title: '输入播放文字',
                        icon: 'error'
                    })
                    return
                }
                amapTTS(this.ttsText)
            },
            getOnceLocation() {
                uni.showLoading({
                    title: '获取定位',
                    mask: true
                })
                getAmapLocation({
                    needAddress: true, //是否需要返回位置描述文字信息，此功能需要iOS和安卓的key在高德后台正确配置
                    accuracy: 200 //期望的定位误差，单位：米，一般填 5 、100、200 ，误差越大，定位速度越快，在安卓端：<=10 会传 Hight_Accuracy 给高德，10到 100传 Device_Sensors，100以上传 Battery_Saving
                }, res => {
                    let log = `单次定位回调 ${JSON.stringify(res)}`
                    console.log(log)
                    uni.hideLoading()
                    uni.showToast({
                        title: log,
                        icon: 'none'
                    })
                })
            },
            startLocation() {
                startAmapLocation({
                    need_bg: true, //默认需要后台定位，插件内会实现高德的推荐方案，出现通知栏展示持续定位中。参考： https://lbs.Amap.com/faq/api?title=android-locsdk/guide/addition-func/android8-notice。如果不需要，传入false即可
                    needAddress: true, //是否需要返回位置描述文字信息，此功能需要iOS和安卓的key在高德后台正确配置
                    bg_title: '正在后台定位', //安卓机器后台定位时通知栏展示的文字,
                    interval: 2000 //定位周期，单位毫秒，不传的话默认2000ms
                }, (res) => {
                    // res是回调结果，拿到之后可以自己处理
                    let log = `定位回调 ${JSON.stringify(res)}`
                    console.log(log)
                    uni.showToast({
                        title: log,
                        icon: 'none'
                    })
                })
            },
            stopLocation() {
                stopAmapLocation()
            },
            daohang() {
                let naviTypeOptions = [{
                    title: '驾车',
                    type: 'drive'
                }, {
                    title: '骑行',
                    type: 'ride'
                }, {
                    title: '步行',
                    type: 'walk'
                }]
                uni.showActionSheet({
                    title: '骑行方式',
                    itemList: naviTypeOptions.map(item => `${item.title}`),
                    success: (res) => {
                        let naviType = naviTypeOptions[res.tapIndex].type
                        startAmapNavi({
                            // --------------------必传参数----------------------
                            end: {
                                lon: 118.798039,
                                lat: 31.96875,
                                name: '南京南站',
                                poiId: 'B00190YPLY' //name和poiId可以不设置
                            },

                            // --------------------可选参数----------------------
                            startNaviDirectly: false, //是否跳过路径规划页面，默认为false
                            naviType: naviType, //默认为'drive'
                            start: {
                                lon: 118.779613,
                                lat: 32.055085,
                                name: '南京大学鼓楼校区',
                                poiId: 'B00190B4AC'
                            },

                            //只有驾车导航支持途径点，骑行和步行不支持途径点
                            via: [{
                                poiId: "B001905HYA",
                                name: "南京站",
                                lon: 118.797499,
                                lat: 32.087104
                            }], 

                            //货车导航设置车辆参数即可
                            carInfo:{
                                plateNumber:'京N66Y66',//车牌号
                                type:'1',//0:燃油客车; 1:燃油货车; 2:纯电动客车; 3:纯电动货车; 4:插电式混动客车; 5:插电式混动货车; 11:摩托车. 默认0(小车). 注意:只有设置了货车, 其他关于货车的属性设置才会生效
                                size:'4',//设置货车的大小，1-微型货车 2-轻型/小型货车 3-中型货车 4-重型货车，默认为2
                                width:'2.5' ,//设置货车的最大宽度，单位：米，mCarType = 1时候生效，取值[0-25.5]，默认2.5米
                                height:'3.5',//设置货车的高度，单位：米，mCarType = 1时候生效，取值[0-25.5],默认1.6米
                                length:'7.3',//设置货车的最大长度，单位：米，mCarType = 1时候生效，取值[0-25]，默认6米
                                load:'0',//设置货车的总重，即车重+核定载重，单位：吨，mCarType = 1时候生效，取值[0-6553.5]
                                weight:'2.5',//设置货车的核定载重，单位：吨，mCarType = 1时候生效，取值[0-6553.5]
                                axies:'2',//设置货车的轴数，mCarType = 1时候生效，取值[0-255]，默认为2
                                restriction: true ,//设置是否躲避车辆限行，true代表躲避车辆限行，false代表不躲避车辆限行,默认为true
                                loadSwitch: true //设置货车重量是否参与算路，true-重量会参与算路；false-重量不会参与算路。默认为false
                            }

                        }, (res) => {
                            // res是回调结果，拿到之后可以自己处理
                            let log = `导航回调 ${JSON.stringify(res)}`
                            console.log(log)
                            uni.showToast({
                                title: log,
                                icon: 'none'
                            })
                        })

                        // 演示在导航底图上添加 marker 的功能（该方法可用,只是demo中暂时注释掉了)
                        // setTimeout(() => {
                        //     let markers = [{
                        //         id: 'uuid111', //marker的唯一id，不能重复
                        //         lat: 32.07634127,
                        //         lng: 118.77755662,
                        //         title: '天安门',
                        //         icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
                        //         iconWidth: 60,
                        //         iconHeight: 60, //单位 px , iconWidth和iconHeight成对传，否则不生效
                        //         zIndex: 1
                        //     }]
                        //     addMarkerToAmapNavi(JSON.stringify(markers))
                        // }, 3000)

                        // 演示在导航底图上添加 marker 的功能（该方法可用,只是demo中暂时注释掉了)
                        // setTimeout(()=>{
                        //     let markerIds = ['uuid111']
                        //     removeMarkerFromAmapNavi(JSON.stringify(markerIds))
                        //     // removeAllMarkersFromAmapNavi()
                        // }, 10000)
                    }
                })

            }

        }
    }
</script>

<style>
    page {
        width: 100%;
        height: 100%;
        background-color: white;
    }

    .container {
        width: 100%;
        background-color: white;
        padding-bottom: 20rpx;
    }

    button {
        margin: 10px 10px 0 10px;
    }

    .voice-input {
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 5px;
    }

    .title {
        margin-top: 20px;
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
    }
</style>

示例页面二：地图功能

<template>
    <view class="container">
        <view class="map-container">
            <pow-amapall class="map" ref='amap' @markerClick='markerBeiDianJiLe' @regionDidChange='shijiaoJieshuBianhua'
                @regionWillChange='shijiaoKaishiBianhua' @mapClick='mapBeiDianJiLe'
                @mapScreenshotRes='ditujietuhuidiao'></pow-amapall>
        </view>
        <view class="options">
            <button type="primary" class="controlbtn" size="mini" @click="jianchadingweiquanxian">检查定位权限</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showzijiweizhi">{{didShowMyLocation?'隐藏':'展示'}}自己位置</button>
            <button type="primary" class="controlbtn" size="mini" @click="qiehuantuceng">切换图层</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showlukuangxinxi">{{didShowTraffic?'隐藏':'展示'}}路况信息</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showguiweianniu">{{didShowMyLocationBtn?'隐藏':'展示'}}归位按钮</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showbilichi">{{didShowScaleSize?'隐藏':'展示'}}比例尺可见</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showsuofanganniu">{{didShowZoomBtn?'隐藏':'展示'}}缩放按钮</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="showzhinanzhenanniu">{{didShowCompassBtn?'隐藏':'展示'}}指南针按钮</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="enablesuofangshoushi">{{enableZoomGesture?'禁止':'允许'}}缩放手势</button>
            <!-- 拖拽，倾斜，旋转手势控制 -->
            <button type="primary" class="controlbtn" size="mini"
                @click="enabletuozhuaishoushi">{{enableScrollGesture?'禁止':'允许'}}拖拽手势</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="enableqingxieshoushi">{{enableTiltGesture?'禁止':'允许'}}倾斜手势</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="enablexuanzhuanshoushi">{{enableRotateGesture?'禁止':'允许'}}旋转手势</button>
            <button type="primary" class="controlbtn" size="mini"
                @click="zhongyingwen">切换到{{switchToLanguage}}文地图</button>
            <button type="primary" class="controlbtn" size="mini" @click="movedituzhongxindian">移动地图中心点</button>
            <button type="primary" class="controlbtn" size="mini" @click="suofangditu">缩放地图</button>
            <button type="primary" class="controlbtn" size="mini" @click="shezhisuofangfanwei">设置缩放范围</button>
            <button type="primary" class="controlbtn" size="mini" @click="tianjiamarker">添加marker</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchumarker">删除指定marker</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchusuoyoumarker">删除所有marker</button>
            <button type="primary" class="controlbtn" size="mini" @click="huazhexian">画折线</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchuzhexian">删除某条折线</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouzhexian">删除所有折线</button>
            <button type="primary" class="controlbtn" size="mini" @click="huayuanxing">画圆形</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchuyuanxing">删除某个圆形</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouyuanxing">删除所有圆形</button>
            <button type="primary" class="controlbtn" size="mini" @click="huaduobianxing">画多边形</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchuduobianxing">删除某个多边形</button>
            <button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouduobianxing">删除所有多边形</button>
            <button type="primary" class="controlbtn" size="mini" @click="suofangbaohanmarkers">缩放以包含marker</button>
            <button type="primary" class="controlbtn" size="mini" @click="pinghuayidong">点平滑移动</button>
            <button type="primary" class="controlbtn" size="mini" @click="ditujietu">地图截图</button>
            <button type="primary" class="controlbtn" size="mini" @click="zijitubiao">改变自己位置图标</button>
            <button type="primary" class="controlbtn" size="mini" @click="zijitubiaoDefault">恢复自己位置图标</button>

        </view>

    </view>
</template>

<script>
    import {
        checkAndRequestLocationPermission
    } from '@/uni_modules/pow-amapall'
    const iconData = require('@/static/iconbase64.json')
    let _markers = [{
            id: 'uuid111', //marker的唯一id，不能重复
            lat: 39.909187,
            lng: 116.397455,
            title: '天安门',
            subtitle: '天安门城楼',
            icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
            iconWidth: 30,
            iconHeight: 30, //单位 px , iconWidth和iconHeight成对传，否则不生效
            anchor: 'center', // center 图片中间对准经纬度(常用于表示车辆行驶在路上)，bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置)，默认值center
            // 如果存在callout气泡,anchor会被强制设置为bottomCenter
            callout: {
                content: '自定义的气泡1',
                textColor: '#ff88ff',
                fontSize: 13,
                textAlign: 'center',
                borderRadius: 10,
                borderColor: '#ff0000',
                borderWidth: 1,
                bgColor: '#ffffff',
                padding: 5 //气泡文字跟边框的距离
            }
        },
        {
            id: 'uuid222', //marker的唯一id，不能重复
            title: '王府井',
            lat: 39.909187,
            lng: 116.412555,
            subtitle: '王府井大街',
            anchor: 'bottomCenter',
            callout: {
                content: '这是一个自定义的气泡',
                textColor: '#ff8800',
                fontSize: 20,
                textAlign: 'center',
                borderRadius: 10,
                borderColor: '#ff0000',
                borderWidth: 3,
                bgColor: '#ffffff',
                padding: 20
            }
        },
        {
            id: 'uuid333', //marker的唯一id，不能重复
            title: '社区',
            lat: 39.959187,
            lng: 116.397455,
            subtitle: '老舍茶馆',
            anchor: 'bottomCenter',
            iconBase64: iconData.imageBase64,
            iconWidth: 40,
            iconHeight: 40, //单位 px , iconWidth和iconHeight成对传，否则不生效
        },
    ]
    let polyline = {
        id: 'polyline111', //折线的唯一id，不能重复
        points: [
            '116.362209,39.887487',
            '116.422897,39.878002',
            '116.372105,39.90651',
            '116.428945,39.89663'
        ],
        width: 20,
        isDottedLine: true,
        color: '#ff0000',
    }
    let circle = {
        id: 'circle111', //圆形的id，不能重复
        lat: 39.909187,
        lng: 116.397455, //圆心经纬度
        radius: 1000, //单位 m
        lineWidth: 5,
        strokeColor: '#FF0000',
        fillColor: '#00ffff',
    }
    let polygon = {
        id: 'polygon111', //多边形的id，不能重复
        points: [
            '116.404,39.915',
            '116.408,39.917',
            '116.412,39.919',
            '116.412,39.921',
            '116.410,39.923',
            '116.406,39.923',
            '116.404,39.921'
        ],
        lineWidth: 5,
        strokeColor: '#FF0000',
        fillColor: '#00ffff',
    }

    export default {
        onReady() {},
        data() {
            return {
                didShowMyLocation: false,
                didShowTraffic: false,
                didShowMyLocationBtn: false,
                didShowZoomBtn: true,
                didShowCompassBtn: false,
                enableZoomGesture: true,
                enableScrollGesture: true,
                enableTiltGesture: true,
                enableRotateGesture: true,
                didShowScaleSize: true,
                switchToLanguage: '英'
            }
        },
        methods: {
            zijitubiao() {
                let myLocationIconParams = {
                    icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png',
                    // iconBase64: iconData.imageBase64,
                }
                // 展示自身位置，并且设置当前位置的自定义图标，不再是个小蓝点
                this.$refs.amap.setMyLocationIcon(JSON.stringify(myLocationIconParams))
            },
            zijitubiaoDefault(){
                // 恢复自身位置为默认图标
                this.$refs.amap.setMyLocationIcon(JSON.stringify({}))
            },
            ditujietuhuidiao(res) {
                console.log(`截图回调:${JSON.stringify(res)}`);
                let resObj = JSON.parse(res.detail)
                let imagePath = `${resObj.path}`
                let toastString =
                    `截图路径:${imagePath}\n截图是否完整:${resObj.hasGrid == false}`; //hasGrid 是否有网格参考 https://lbs.amap.com/api/ios-sdk/guide/interaction-with-map/map-screenshot
                uni.showModal({
                    title: '提示',
                    content: toastString,
                    showCancel: true,
                    confirmText: '查看',
                    success(click) {
                        if (click.confirm) {
                            if (uni.getSystemInfoSync().platform == 'android') {
                                uni.navigateTo({
                                    url: `/pages/common/imagePreview?src=file://${imagePath}`
                                })
                            } else {
                                uni.previewImage({
                                    urls: [imagePath]
                                })
                            }
                        }
                    }
                })
            },
            ditujietu() {
                console.log('ditujietu');
                this.$refs.amap.mapScreenshot()
            },
            mapBeiDianJiLe(args) {
                console.log(`地图被点击了:${args.detail}`)
            },
            shijiaoKaishiBianhua(args) {
                console.log(`视角开始变化:${args.detail}`)
            },
            shijiaoJieshuBianhua(args) {
                console.log(`视角结束变化:${args.detail}`)

            },
            zhongyingwen() {
                let params = {
                    switchToLanguage: this.switchToLanguage //入参可选：中/英
                }
                this.$refs.amap.changeLanguage(JSON.stringify(params))

                if (this.switchToLanguage == '英') {
                    this.switchToLanguage = '中'
                } else {
                    this.switchToLanguage = '英'
                }
            },
            pinghuayidong() {
                this.$refs.amap.zoomTo(JSON.stringify({
                    zoomLevel: 13
                }))
                let testPoints = [
                    '116.37,39.91',
                    '116.380298, 39.907771',
                    '116.38, 39.90',
                    '116.385298, 39.907771',
                    '116.40, 39.90',
                    '116.40772, 39.909252',
                    '116.41, 39.89',
                    '116.423857, 39.889498',
                    '116.422312, 39.899639',
                    '116.425273, 39.902273'
                ]
                //画一条线，方便观察移动轨迹
                let polylinexxx = {
                    id: 'polylinexxx', //折线的唯一id，不能重复
                    points: testPoints,
                    width: 10,
                    isDottedLine: false,
                    color: '#ff0000',
                }
                this.$refs.amap.drawPolyline(JSON.stringify(polylinexxx))

                // 开始添加一个平滑移动的marker
                let options = {
                    points: testPoints,
                    icon: 'https://s21.ax1x.com/2024/03/13/pFcsHVP.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
                    duration: 10, //单位 秒
                    id: 'animate111', // 用来做删除和多次平滑移动，如果要实现多次移动同一个marker，多次调用addMoveAnimation时传相同id即可
                    removeMarkerWhenFinish: true, //动画结束后是否需要移除
                    iconWidth: 75,
                    iconHeight: 75,
                    anchor: 'center' //可选项： center 图片中间对准经纬度(常用于表示车辆行驶在路上)，bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置)，默认值center
                }

                this.$refs.amap.addMoveAnimation(JSON.stringify(options))
            },
            qiehuantuceng() {
                const options = [{
                        title: '导航',
                        type: 'navi'
                    },
                    {
                        title: '卫星',
                        type: 'satellite'
                    },
                    {
                        title: '普通(默认)',
                        type: 'normal'
                    },
                    {
                        title: '夜景',
                        type: 'night'
                    },
                    {
                        title: '导航夜景',
                        type: 'navinight'
                    },
                    {
                        title: '公交',
                        type: 'bus'
                    }
                ]
                uni.showActionSheet({
                    title: '切换图层',
                    itemList: options.map(item => `${item.type}`),
                    success: (res) => {
                        let params = {
                            mapType: options[res.tapIndex].type
                        }
                        this.$refs.amap.setMapType(JSON.stringify(params))
                    }
                })
            },
            suofangbaohanmarkers() {
                console.log('缩放地图以包含给定的多个marker，并且设置边界空白')
                let params = {
                    markers: _markers,
                    paddingTop: 50, // 单位，像素
                    paddingBottom: 50,
                    paddingLeft: 50,
                    paddingRight: 50,
                    animated: true
                }

                this.$refs.amap.setVisibleIncludeMarkers(JSON.stringify(params))
            },
            markerBeiDianJiLe(markInfo) {
                console.log(`demo收到添加的marker被点击了:${markInfo.detail}`)
            },
            huayuanxing() {
                this.$refs.amap.drawCircle(JSON.stringify(circle))
            },
            shanchuyuanxing() {
                this.$refs.amap.removeCircle(JSON.stringify(circle))
            },
            shanchusuoyouyuanxing() {
                this.$refs.amap.removeAllCircles()
            },
            huaduobianxing() {
                this.$refs.amap.drawPolygon(JSON.stringify(polygon))
            },
            shanchuduobianxing() {
                this.$refs.amap.removePolygon(JSON.stringify(polygon))
            },
            shanchusuoyouduobianxing() {
                this.$refs.amap.removeAllPolygons()
            },
            shanchusuoyouzhexian() {
                this.$refs.amap.removeAllPolylines()
            },
            shanchuzhexian() {
                this.$refs.amap.removePolyline(JSON.stringify(polyline))
            },
            huazhexian() {
                this.$refs.amap.drawPolyline(JSON.stringify(polyline))
            },
            shezhisuofangfanwei() {
                let zoomLevel = {
                    min: 10,
                    max: 15
                }
                this.$refs.amap.setMinAndZoomLevel(JSON.stringify(zoomLevel))
                uni.showToast({
                    title: '设置了缩放范围是10-15',
                    icon: 'none'
                })
            },
            shanchusuoyoumarker() {
                this.$refs.amap.removeAllMarkers()
            },
            shanchumarker() {
                this.$refs.amap.removeSomeMarkers(JSON.stringify(_markers))
            },
            tianjiamarker() {
                this.$refs.amap.addMarkers(JSON.stringify(_markers))
            },
            suofangditu() {
                let zoomOptions = [0, 5, 10, 14, 17, 21]
                uni.showActionSheet({
                    title: '设置缩放级别(0到21都行)',
                    itemList: zoomOptions.map(item => item + '级'),
                    success: (res) => {
                        let param = {
                            zoomLevel: zoomOptions[res.tapIndex]
                        }
                        let paramString = JSON.stringify(param)
                        this.$refs.amap.zoomTo(paramString)
                    }
                })
            },
            movedituzhongxindian() {
                const options = [{
                        title: '北京天安门',
                        lat: 39.909187,
                        lng: 116.397455,
                    },
                    {
                        title: '上海迪士尼',
                        lat: 31.231706,
                        lng: 121.67269,
                    },
                    {
                        title: '敦煌莫高窟',
                        lat: 40.037403,
                        lng: 94.805872,
                    },
                    {
                        title: '广州塔',
                        lat: 23.129163,
                        lng: 113.26444,
                    },
                    {
                        title: '布达拉宫',
                        lat: 29.654471,
                        lng: 91.118463,
                    }

                ]
                uni.showActionSheet({
                    title: '选择一个中心点',
                    itemList: options.map(item => `${item.title}:${item.lat},${item.lng}`),
                    success: (res) => {
                        let param = {
                            lng: options[res.tapIndex].lng,
                            lat: options[res.tapIndex].lat,
                            animate: false
                        }
                        let paramString = JSON.stringify(param)
                        this.$refs.amap.moveTo(paramString)
                    }
                })
            },
            showbilichi() {
                this.$refs.amap.showScaleSize(!this.didShowScaleSize)
                this.didShowScaleSize = !this.didShowScaleSize
            },
            enabletuozhuaishoushi() {
                this.$refs.amap.enableScrollGesture(!this.enableScrollGesture)
                this.enableScrollGesture = !this.enableScrollGesture
            },
            enableqingxieshoushi() {
                this.$refs.amap.enableTiltGesture(!this.enableTiltGesture)
                this.enableTiltGesture = !this.enableTiltGesture
            },
            enablexuanzhuanshoushi() {
                this.$refs.amap.enableRotateGesture(!this.enableRotateGesture)
                this.enableRotateGesture = !this.enableRotateGesture
            },
            enablesuofangshoushi() {
                this.$refs.amap.enableZoomGesture(!this.enableZoomGesture)
                this.enableZoomGesture = !this.enableZoomGesture
            },
            showzhinanzhenanniu() {
                this.$refs.amap.showCompassBtn(!this.didShowCompassBtn)
                this.didShowCompassBtn = !this.didShowCompassBtn
            },
            showsuofanganniu() {
                this.$refs.amap.showZoomBtn(!this.didShowZoomBtn)
                this.didShowZoomBtn = !this.didShowZoomBtn
            },
            jianchadingweiquanxian() {
                checkAndRequestLocationPermission((res) => {
                    console.log(`请求权限结果:${JSON.stringify(res)}`)
                    uni.showToast({
                        title: `请求权限结果:${res.msg}`,
                        icon: 'none'
                    })
                })
            },
            showzijiweizhi() {
                let params = {
                    show: !this.didShowMyLocation, //是否展示自身位置
                    updatingMapCenter: false //是否根据自身位置移动地图
                }
                this.$refs.amap.showMyLocation(JSON.stringify(params))
                this.didShowMyLocation = !this.didShowMyLocation
            },
            showlukuangxinxi() {
                this.$refs.amap.showTraffic(!this.didShowTraffic)
                this.didShowTraffic = !this.didShowTraffic
            },
            showguiweianniu() {
                this.$refs.amap.showMyLocationBtn(!this.didShowMyLocationBtn)
                this.didShowMyLocationBtn = !this.didShowMyLocationBtn
            }

        }
    }
</script>

<style>
    .map-container {
        width: 750rpx;
        height: 550rpx;
    }

    .container {
        display: flex;
        flex-direction: column;
        width: 750rpx;
    }

    .map {
        width: 750rpx;
        height: 550rpx;
    }

    .controlbtn {
        width: 120px;
        margin-left: 5px;
        margin-top: 3px;
    }

    .options {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 750rpx;
        padding-top: 10rpx;
        padding-bottom: 20rpx;

    }
</style>