如何在Google Maps搜索完成后获取Marker经纬度（无需拖拽）

嘿，我懂你的需求啦——你希望在Google Maps里用搜索框找到地点后，不用拖拽Marker就能直接拿到它的经纬度，而不是只在拖拽结束后才能获取。其实这个操作很简单，因为当你完成搜索并选中地点时，Google Places API返回的结果里已经包含了完整的位置信息，咱们直接用就行！

核心思路 #

当用户通过Autocomplete搜索框选中一个地点时，Places API会返回包含geometry.location的place对象，这个对象本身就是经纬度坐标（google.maps.LatLng类型），咱们直接从中提取纬度和经度就可以，完全不需要依赖拖拽事件。

完整代码示例 #

假设你已经初始化了地图和搜索框，下面是整合后的代码：

// 初始化搜索框的Autocomplete组件
const searchInput = document.getElementById('your-search-input-id');
const autocomplete = new google.maps.places.Autocomplete(searchInput);

// 监听搜索结果选中事件
autocomplete.addListener('place_changed', () => {
  const selectedPlace = autocomplete.getPlace();

  // 先检查是否有有效的位置信息（避免无效搜索结果）
  if (!selectedPlace.geometry || !selectedPlace.geometry.location) {
    alert('抱歉，无法获取该地点的位置信息');
    return;
  }

  // 直接提取经纬度，并保留三位小数
  const centerLat = selectedPlace.geometry.location.lat().toFixed(3);
  const centerLng = selectedPlace.geometry.location.lng().toFixed(3);

  // 把值赋给你的变量（和你原来的代码保持一致）
  This.centerLat = centerLat;
  This.centerLng = centerLng;

  // 创建Marker（和你原来的代码一样，支持拖拽）
  const marker = new google.maps.Marker({
    position: selectedPlace.geometry.location,
    map: map,
    draggable: true,
    title: "Drag me!"
  });

  // 保留你原来的拖拽结束监听，拖拽后更新位置
  google.maps.event.addListener(marker, 'dragend', function(position) {
    This.centerLat = position.latLng.lat().toFixed(3);
    This.centerLng = position.latLng.lng().toFixed(3);
  });
});

关键说明 #

• place_changed事件：这是Autocomplete组件的核心事件，当用户从搜索建议中选中一个地点时就会触发，此时调用getPlace()就能拿到完整的地点数据。
• 检查geometry属性：有些搜索结果（比如非常模糊的关键词）可能没有有效的位置信息，加个判断能避免代码报错。
• 和原有拖拽逻辑兼容：上面的代码保留了你原来的dragend监听，这样不管是搜索后直接获取位置，还是拖拽Marker更新位置，都能正常工作。

内容的提问来源于stack exchange，提问作者Mostafa Ahmed