产品小姐姐：地图（谷歌）选点，我还不能自己点？

💡 背景

最近在做海外项目，需要让用户选择一个实际地点——比如设置店铺位置、收货地址、活动举办地等。

我：不就是 uni.getLocation(object) 嘛，可惜海外项目用不了高德地图和百度地图，只能转向谷歌地图。

在@googlemaps/js-api-loader和vue3-google-map一顿折磨之后，不知道是不是使用方式错了，谷歌地图只在h5上显示，真机（包括自定义基座）都显示不了地图。无奈，只能转向WebView，至此，开始手撕谷歌地图： 地图选点 + 搜索地址 + 点击地图选点 + 经纬度回传

🎬 场景设定：选房子

某天产品说：“用户能搜地址，也能点地图，最后把这些地点存起来显示在地图。”

我听着简单，于是点开地图，灵光一闪：这不就是选房的逻辑吗？

• 
  
• 用户可以搜地段（搜索框）
  
• 也可以瞎逛看到喜欢的（点击地图）
  
• 最后点个确定，告诉中介（确认按钮）
  

我：“你疯啦？这是太平洋中间。”

产品：“不是，这是用户自由。”

🧱 核心结构分析

📦 页面骨架

<div id="map"></div>
<div id="overlay-controls">
<input id="search-input" ... />
<div id="confirm-btn">确定</div>
</div>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=你的key&callback=initMap" async defer></script>
<script>

这是一个标准的地图 + 控制浮层结构。我们用一个 #map 占据全屏，再通过 position: absolute 让搜索框和按钮漂浮在上面。(ps：注意必须引入uni.webview才能进行通讯)

🧠 方法逐个看

1. initMap：地图的灵魂觉醒

function initMap() { ... }

• 
  
• 调用时机：Google Maps 的 callback 会自动触发
  
• 作用：初始化地图、绑定事件、准备控件
  

2. 获取定位：我在哪我是谁

if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(...)

}

• 
  
• 成功：把你真实的位置显示出来
  
• 失败：退而求其次用旧金山
  

3. 搜索地址：让用户自己找方向

const autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();

  ...

});

• 
  
• 功能：用 Google 提供的地址搜索建议
  
• 高级点：可以定位到建筑物级别的精度
  
• 产品：用户脑子里比你更清楚他想去哪
  

4. 点地图选点：给随性的人自由

map.addListener("click", (e) => {
const lat = e.latLng.lat();
const lng = e.latLng.lng();

  ...

});

• 
  
• 功能：用户随手一点，就能选中那个点
  
• 技术点：用 Geocoder 反解析经纬度 ➜ 地址
  
• 实用性：解决“我不知道地址叫什么”的痛点，且可切换卫星实景图像选点
  

就像： 当年你去面试，不知道公司叫什么，只知道“拐角有个便利店”。

5. setLocation：标记我心之所向

function setLocation(lat, lng, address) {

  selectedLatLng = { lat, lng };

  selectedAddress = address;

  ...

}

• 
  
• 核心职责：更新选择结果，设置 marker
  
• 重复点击自动替换 marker，保持页面整洁
  
• UI 响应式体验的小心机，细节满满
  

哲理时间： 你不能同时站在两个地方，虽然marker可以，但是此处marker不做分布点，只作为当前点击地点。

6. confirm-btn：确定这就是你的人生目标吗？

document.getElementById("confirm-btn").addEventListener("click", () => {
if (!selectedLatLng) {
alert("请先选择地点");
return;

  }

  uni.postMessage({ data: { ... } });

  uni.navigateBack({ delta: 1 });

});

• 
  
• 检查用户是否真的选点了
  
• 用 uni.postMessage 把选中的地址、经纬度送回 uniapp 主体页面
  
• 然后自动关闭 WebView，返回主流程
  

产品视角： 用户选完东西，你就别啰嗦了，自己退出。

可查看卫星实景图像，点击地图选点

点击地图拿到地点数据就可以继续业务处理啦~

🎁 彩蛋动画：CSS Loading

<div class="loader" id="loader"></div>

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }

}

加载的时候出现个小旋转圈圈，用户等得不烦，体验感 +1。

这就像爱情：等一等，说不定就没了。

✅ 功能总结

🧘 写在最后

这个地图选点组件，看似只是点点点，但背后涉及用户体验、API 使用、移动端交互的多种协作。本文只写了大概方法思路，具体实现看具体业务需求。

下次再见！🌈