Ruby on Rails 4集成Google Maps：邮编与固定地点距离计算

嘿，我来帮你搞定这个Ruby on Rails集成Google Maps的需求！我之前做过类似的功能，给你一步步拆解，保证你能顺利实现：

首先得去Google Cloud控制台申请一个API密钥，然后启用两个核心服务：Maps JavaScript API和Geocoding API（用来把邮编转成经纬度）。

拿到密钥后，把它存在Rails的环境变量里（别直接写在代码里！），比如在config/application.yml（用figaro gem的话）或者config/environments/development.rb里加：

ENV['GOOGLE_MAPS_API_KEY'] = '你的密钥内容'

打开app/views/layouts/application.html.erb，在</head>标签前添加Google Maps的JS脚本，记得带上需要的库：

<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&libraries=geometry"></script>

这里的geometry库是用来计算两点距离的，必须加上！

先创建一个控制器和页面：

rails generate controller Maps index

然后在app/views/maps/index.html.erb里写页面结构：

<div style="margin: 20px;">
  <input type="text" id="zip-code" placeholder="输入邮编" style="padding: 8px; width: 200px;">
  <button id="calc-distance" style="padding: 8px 16px; margin-left: 10px;">计算到店铺的距离</button>
</div>
<div id="map" style="width: 100%; height: 600px; margin-top: 20px;"></div>
<div id="distance-display" style="margin: 20px; font-size: 18px; font-weight: bold;"></div>

接下来写核心的JavaScript逻辑，放在页面底部或者单独的JS文件里：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你店铺的实际经纬度（可以从数据库读取，比如@shop.latitude）
  const shopPosition = new google.maps.LatLng(31.2304, 121.4737); // 示例：上海坐标

  // 初始化地图，默认聚焦到店铺位置
  const map = new google.maps.Map(document.getElementById('map'), {
    center: shopPosition,
    zoom: 12
  });

  // 添加店铺的固定标记
  new google.maps.Marker({
    position: shopPosition,
    map: map,
    title: '我们的店铺',
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
  });

  // 绑定计算按钮的点击事件
  document.getElementById('calc-distance').addEventListener('click', function() {
    const zipCode = document.getElementById('zip-code').value.trim();
    if (!zipCode) {
      alert('请输入有效的邮编哦！');
      return;
    }

    // 用Geocoding API把邮编转成经纬度
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: zipCode }, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        const userPosition = results[0].geometry.location;

        // 添加用户地址的蓝色标记
        new google.maps.Marker({
          position: userPosition,
          map: map,
          title: '你的位置',
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });

        // 计算距离（转成公里，保留两位小数）
        const distanceInKm = google.maps.geometry.spherical.computeDistanceBetween(shopPosition, userPosition) / 1000;
        document.getElementById('distance-display').textContent = `到店铺的距离约为：${distanceInKm.toFixed(2)} 公里`;

        // 调整地图视野，同时显示店铺和用户位置
        const bounds = new google.maps.LatLngBounds();
        bounds.extend(shopPosition);
        bounds.extend(userPosition);
        map.fitBounds(bounds);
      } else {
        alert('抱歉，无法解析这个邮编，请检查输入是否正确！');
      }
    });
  });
});

如果不想每次都调用Google的Geocoding API（节省配额和速度更快），可以在后端加个缓存模型：

# app/models/zip_geocode.rb
class ZipGeocode < ApplicationRecord
  validates :zip_code, presence: true, uniqueness: true
end

然后在控制器里加一个接口处理地理编码：

# app/controllers/maps_controller.rb
class MapsController < ApplicationController
  def index
    @shop = Shop.first # 假设你有Shop模型存储店铺信息
  end

  def get_zip_coords
    zip_code = params[:zip_code]
    cached_result = ZipGeocode.find_by(zip_code: zip_code)

    if cached_result
      render json: { lat: cached_result.latitude, lng: cached_result.longitude }
    else
      # 用Ruby的geocoder gem来处理（先装gem: gem 'geocoder'）
      location = Geocoder.search(zip_code).first
      if location
        ZipGeocode.create!(zip_code: zip_code, latitude: location.latitude, longitude: location.longitude)
        render json: { lat: location.latitude, lng: location.longitude }
      else
        render json: { error: '无效邮编' }, status: :bad_request
      end
    end
  end
end

之后前端就可以改成调用这个后端接口，代替直接在前端调用Google的Geocoding API，更安全也更高效。

• 记得在Google Cloud控制台检查API的配额和计费设置，避免意外扣费
• 如果支持多国邮编，可以在Geocoding请求里加region参数限制范围，比如geocoder.geocode({ address: zipCode, region: 'cn' })
• 店铺的经纬度可以提前用Geocoding API获取后存在数据库里，不要每次都计算

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