谷歌地图地理编码两种方式请求返回地址

最新推荐文章于 2025-06-13 11:02:17 发布

原创

最新推荐文章于 2025-06-13 11:02:17 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在谷歌账号中启用Geocoding API，并通过两种方式（直接引入和使用ajax请求）在JavaScript中实现地址的地理编码和反编码。示例代码展示了如何获取并使用返回的地址信息。此外，还提供了错误处理和地址显示的语言设置选项。

首先到谷歌账号中启用Geocoding API，该API是需要付费的，每个月超过一定的数量来计算。

谷歌地图语言设置：https://malagis.com/google-maps-js-map-display-language.html

1.官网中的方法：

导入script：

https://maps.googleapis.com/maps/api/js?key=youkey&sensor=false&libraries=places&language=en-us"

          let address;
          const geocoder = new google.maps.Geocoder();
          const latlng = new google.maps.LatLng(lat, lng);
          geocoder.geocode({ location: latlng }).then((res, stauts) => {
            console.log(res);
            address = res.results[0].formatted_address
          });

具体地址按照需求赋值

2.使用ajax请求的方式：

// 谷歌地图地址编码 转换回来的都是英文的
Vue.prototype.getGoogleLocation = function(lat, lon, callback_function) {
  // console.log(lat, lon);
  var language = "en-us";
  const key = "$youkey";
  var lang = this.langType;
  const failAddr = lang == "en" ? "Fail to parse address" : "地址解析失败";
  $.ajax({
    type: "get",