uni-app 高德地图开发

功能要求

显示附近10公里、或者20公里以内的符合条件的地标
实现微信小程序和安卓app即可

有偿、有兴趣的可以接


| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
|          |        |              |

sinazl 1楼•13 小时前

wx:niuzai-168

nodeper 2楼•13 小时前

wx:niu-zai168

sinazl 3楼•13 小时前

在uni-app中集成高德地图开发，可以通过高德地图提供的JavaScript API来实现。以下是一个简单的代码示例，展示了如何在uni-app项目中嵌入高德地图，并进行基本的地图展示和定位功能。

1. 准备工作

首先，你需要在高德开放平台申请一个API Key，确保你的应用有权限访问高德地图服务。

2. 在uni-app项目中集成高德地图

2.1 修改`manifest.json`

在manifest.json文件中，添加高德地图的域名到network配置中，以便能够加载高德地图的JS SDK。

"network": {
    "request": {
        "合法域名": [
            "*.amap.com"
        ]
    }
}

2.2 在页面中引入高德地图JS SDK

在需要使用高德地图的页面中，通过<script>标签引入高德地图的JS SDK，并传入你的API Key。

<template>
  <view class="map-container">
    <div id="container" style="width: 100%; height: 100%;"></div>
  </view>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https://webapi.amap.com/maps?v=2.0&key=你的API_KEY`;
      script.onload = () => {
        this.loadMap();
      };
      document.body.appendChild(script);
    },
    loadMap() {
      const map = new AMap.Map('container', {
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点
      });

      // 添加定位控件
      AMap.plugin('AMap.Geolocation', () => {
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
          convert: true,            // 自动偏移定位结果，默认：true
        });

        map.addControl(geolocation);
        geolocation.getCurrentPosition((status, result) => {
          if (status === 'complete') {
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          const lnglat = data.position;
          map.setCenter(lnglat);
        }

        function onError(data) {
          console.log(data.message);
        }
      });
    }
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh; /* 可以根据需要调整高度 */
}
</style>