更新记录

1.2.0(2025-06-25) 下载此版本

使用方法更贴近uniapp的map组件

1.1.0(2024-07-12) 下载此版本

  1. 将天地图API从http改为https
  2. 新增支持微信公众号定位,具体用法请看说明

1.0.1(2024-07-11) 下载此版本

测试发布 #

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - -

uni-app x

Chrome Safari Android iOS 鸿蒙 微信小程序
- - -

其他

多语言 暗黑模式 宽屏模式
× ×

melon-location

开发文档

使用方式参考unapp的getLocation、openLocation、chooseLocation

注意事项

  1. 需要在manifest.json内写入天地图的key
  2. ***定位只实现了定位,获取配置需自行实现

如何配置天地图的Key

  1. 在***项目根目录找到manifest.json文件
  2. 选择“源码地图”
    "h5" : {
    "***" : {
        "maps" : {
            "***" : {
                "key" : "xxxx"
            }
        }
    }
    }

map组件

目前暂时支持示例中的,传参参考的map组件,不支持***

<melon-map 
    ref="map" 
    id="map" 
    class="map" 
    :markers="markers" 
    :z-index="99" 
    :latitude="29.575916" 
    :longitude="106.573167" 
    @markertap="markertap">
</melon-map>

如何获取mapContext

参考天地图api,API 4.0 类参考

const mapContext = this.$refs.map;
// 配置公众号jweixin对象名称(别名,不能是wx,否则与***冲突)
// 参考https://ask.dcloud.net.cn/article/35380
const jweixin = jwx;

const maps: MapServices = {
  ***: {
    key: "",
  },
  qqmap: {
    key: "",
  },
  amap: {
    key: "",
  },
  google: {
    key: "",
  },
  baidu: {
    key: "",
  },
};

如何使用API定位

import { getLocation } from '@/uni_modules/melon-location';
getLocation({
        type: 'gcj02',
        geocode: true,
        success: async res => {
            // 注意腾讯地图、天地图、高德返回不一致,需自行判断
            console.log(res)
        },
        fail() {
            console.error("定位失败");
        }
    });
}

隐私、权限声明

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

定位相关权限

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

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

许可协议

MIT协议

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