更新记录

0.07(2024-06-20) 下载此版本

由于https://apis.map.qq.com/ws/place/v1/explore 接口数据返回数据变动,做相应修改

0.06(2024-05-20) 下载此版本

范围搜索接口地址改为:https://apis.map.qq.com/ws/place/v1/explore

0.05(2024-05-18) 下载此版本

原来插件基于qqmap-wx-jssdk.min.js,(https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview);

qqmap-wx-jssdk的reverseGeocoder调用无结果,改为使用腾讯的WebService API;

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

使用场景

用于选择划定范围内的小区门市等,用于范围内小区配送,维修服务器等......

使用说明

插件基于qqmap-wx-jssdk.min.js,(https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview);

qqmap-wx-jssdk的reverseGeocoder调用五结果,改为使用腾讯的WebService API;

manifest.json的mp-weixin节点下的requiredPrivateInfos节点应包含"onLocationChange", "chooseAddress", "getLocation","choosePoi", "chooseLocation", "startLocationUpdate", "startLocationUpdateBackground"

如下

    "mp-weixin" : {
        "appid" : "",
        "setting" : {
        },
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序定位"
            }
        },
        "requiredPrivateInfos" : [
            "onLocationChange",
            "chooseAddress",
            "getLocation",
            "choosePoi",
            "chooseLocation",
            "startLocationUpdate",
            "startLocationUpdateBackground"
        ],
        "plugins" : {
        },
        "optimization" : {
        }
    },

需要在小程序后台 开发管理 -> 接口设置 申请 wx.getLocation接口权限。

<template>
    <view style="height: 80vh;">
        <mapLocationPickerPolygons @selected="selected" :base_url="base_url" :qqmapsdkKey="qqmapsdkKey" :polygons="polygons"></mapLocationPickerPolygons>
    </view>
</template>

<script>
    import mapLocationPickerPolygons from '@/components/liupishui-pickerpolygons/liupishui-pickerpolygons.vue';

    export default {
        components: {
            mapLocationPickerPolygons
        },
        data() {
            return {
                polygons:[
                    {
                        points:[
                            {
                                latitude:'36.850142',
                                longitude:'117.982894',
                            },
                            {
                                latitude:'36.844984',
                                longitude:'118.0732',
                            },
                            {
                                latitude:'36.840355',
                                longitude:'118.099896'
                            },
                            {
                                latitude:'36.797837',
                                longitude:'118.058995'
                            },
                            {
                                latitude:'36.786369',
                                longitude:'117.990083',
                            },
                        ],
                        strokeWidth:1,
                        strokeColor:'#ff000066',
                        fillColor:'#ff000016'
                    }
                ],
                qqmapsdkKey:'*****-*****-*****-*****-*****-*****' ,//必须,申请地址:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview,小程序还需要在控制台(https://lbs.qq.com/dev/console/application/mine)添加小程序的appid
                base_url:'https://******.com/ws/',//小程序不需要配置此项;H5配置此项是为了跨域,地址为自己配置的代理服务器地址加路径'/ws/'(实际请求可能会出现双斜杠,如果报错,记得删除一个);
            }
        },
        methods: {
            selected:(data)=>{
                console.log(data);
            }
        }
    }
</script>

<style>

</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

小程序 wx.getLocation方法会获取用户当前的地理位置

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问