uniapp 如何集成高德地图实现地图选点及搜索功能

在uniapp中如何集成高德地图实现地图选点及搜索功能？需要具体步骤和代码示例，包括如何引入高德地图SDK、初始化地图、实现选点功能以及添加搜索框进行地点搜索。最好能说明在安卓和iOS平台上的兼容性问题和注意事项。

2 回复

在uniapp中集成高德地图，需先申请高德地图key。使用uni-app的地图组件，结合高德地图JS API。通过map组件显示地图，监听tap事件获取坐标。搜索功能调用高德POI搜索接口，将结果展示在地图上。记得配置manifest.json中的地图设置。


在 UniApp 中集成高德地图实现地图选点及搜索功能，可以通过以下步骤完成。由于 UniApp 本身不支持直接使用高德地图 SDK，需使用第三方插件或 Web-view 嵌入方式。这里推荐使用 uni-app 官方支持的 map 组件（仅支持基础地图显示）结合高德地图 JavaScript API（通过 Web-view）来实现完整功能。下面分步骤说明，并提供关键代码示例。

步骤 1：准备高德地图 API Key

  • 访问高德开放平台（https://lbs.amap.com），注册账号并创建应用，获取 JavaScript API 的 Key。
  • 记录 Key，后续在 Web-view 中调用 API 时使用。

步骤 2：使用 Web-view 嵌入高德地图页面

在 UniApp 页面中，使用 web-view 组件加载一个自定义的 HTML 页面，该页面集成高德地图 JavaScript API 实现选点和搜索功能。

UniApp 页面代码（Vue 文件）

在 pages 目录下创建一个页面，例如 map.vue：

<template>
  <view>
    <web-view :src="mapUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 替换为你的高德地图 Key 和 HTML 文件路径
      mapUrl: `/static/map.html?key=YOUR_AMAP_KEY`
    };
  },
  onLoad() {
    // 可选：传递参数到 HTML 页面，例如初始位置
  }
};
</script>

步骤 3：创建高德地图 HTML 页面

在 UniApp 项目的 static 目录下，创建 map.html 文件。该文件使用高德地图 JavaScript API 实现地图显示、选点和搜索功能。

HTML 页面代码（map.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图选点</title>
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }
        #search {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 999;
            width: 90%;
        }
        #result {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: white;
            padding: 10px;
            border: 1px solid #ccc;
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <input type="text" id="search" placeholder="输入地点搜索...">
    <div id="result"></div>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 13,
            center: [116.397428, 39.90923] // 默认北京中心
        });

        var marker = new AMap.Marker({
            map: map,
            draggable: true // 可拖动标记
        });

        // 地图点击事件：设置标记位置
        map.on('click', function(e) {
            marker.setPosition(e.lnglat);
            updateResult(e.lnglat);
        });

        // 标记拖动事件
        marker.on('dragend', function(e) {
            updateResult(e.lnglat);
        });

        // 更新选点结果
        function updateResult(lnglat) {
            document.getElementById('result').style.display = 'block';
            document.getElementById('result').innerHTML = 
                '选点位置: ' + lnglat.getLng() + ', ' + lnglat.getLat() + 
                '<br><button onclick="confirmSelection()">确认选点</button>';
        }

        // 确认选点：将位置信息传回 UniApp
        function confirmSelection() {
            var pos = marker.getPosition();
            // 使用 UniApp 的 postMessage 与 Web-view 通信
            if (window.uni && window.uni.postMessage) {
                window.uni.postMessage({
                    data: {
                        action: 'confirmLocation',
                        longitude: pos.getLng(),
                        latitude: pos.getLat()
                    }
                });
            }
        }

        // 搜索功能：使用高德 PlaceSearch
        var placeSearch = new AMap.PlaceSearch({
            map: map,
            panel: 'result' // 结果显示在 div 中
        });

        document.getElementById('search').addEventListener('change', function(e) {
            placeSearch.search(e.target.value);
        });
    </script>
</body>
</html>

步骤 4：处理 UniApp 与 Web-view 的通信

在 UniApp 页面中，监听 Web-view 发送的消息，以获取选点结果。

在 map.vue 中添加通信处理

<script>
export default {
  data() {
    return {
      mapUrl: `/static/map.html?key=YOUR_AMAP_KEY`
    };
  },
  onLoad() {
    // 监听 Web-view 消息
    document.addEventListener('message', function(e) {
      var data = JSON.parse(e.data);
      if (data.action === 'confirmLocation') {
        // 处理选点结果，例如返回上一页并传递位置数据
        uni.navigateBack({
          delta: 1,
          success: () => {
            // 使用全局事件或 Vuex 传递数据
            uni.$emit('mapLocationSelected', {
              longitude: data.longitude,
              latitude: data.latitude
            });
          }
        });
      }
    });
  }
};
</script>

注意事项

  • Key 替换：将代码中的 YOUR_AMAP_KEY 替换为实际的高德 API Key。
  • 安全性：Key 不要硬编码在前端，建议通过后端动态生成 URL 或使用安全配置。
  • 功能扩展：可根据需要添加更多地图控件（如缩放、图层）。
  • 测试：在真机测试，因为 Web-view 在部分模拟器中可能受限。

通过以上步骤，即可在 UniApp 中实现地图选点和搜索功能。如果有更多定制需求，参考高德地图 JavaScript API 文档（https://lbs.amap.com/api/javascript-api/summary）。

回到顶部