更新记录

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

uni-app x

其他

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("定位失败");
        }
    });
}