如何替换Google Places API请求URL经纬度变量及解决停车场显示问题？

我来帮你一步步解决这个问题——先把固定经纬度换成变量，再排查自定义标记失效的原因：

1. 将固定经纬度替换为变量 #

你可以通过定义变量存储经纬度，再用模板字符串拼接API请求URL，这样就能动态传入地理定位获取到的位置了。以JavaScript为例：

// 假设这是从地理定位API获取到的经纬度变量（实际会动态获取）
let userLat = -33.8670522;
let userLng = 151.1957362;

// 替换为变量后的API请求URL
const apiKey = '[YOUR KEY HERE]';
const placesUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${userLat},${userLng}&radius=1500&type=parking&key=${apiKey}`;

2. 结合地理定位的完整工作流程 #

既然你在用地理定位功能，这里给出完整的从获取用户位置、发起API请求到添加自定义标记的代码示例，确保流程连贯：

// 先初始化地图实例
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: { lat: -33.8670522, lng: 151.1957362 } // 默认位置，后续会替换为用户实际位置
  });

  // 获取用户当前位置
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}

// 地理定位成功后的回调
function successCallback(position) {
  const { latitude, longitude } = position.coords;
  const apiKey = '[YOUR KEY HERE]';
  const placesUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=1500&type=parking&key=${apiKey}`;

  // 发起附近停车场请求
  fetch(placesUrl)
    .then(response => response.json())
    .then(data => {
      if (data.status === 'OK') {
        // 更新地图中心为用户当前位置
        map.setCenter({ lat: latitude, lng: longitude });
        
        // 遍历返回的停车场数据，添加自定义标记
        data.results.forEach(parkingSpot => {
          new google.maps.Marker({
            position: parkingSpot.geometry.location,
            map: map,
            title: parkingSpot.name,
            // 自定义标记图标，替换成你的图标路径
            icon: './custom-parking-marker.png'
          });
        });
      } else {
        console.error('API请求失败，状态码:', data.status);
      }
    })
    .catch(err => console.error('请求出错:', err));
}

// 地理定位失败的回调
function errorCallback(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert('你拒绝了地理定位请求，请开启权限后重试');
      break;
    case error.POSITION_UNAVAILABLE:
      alert('无法获取你的位置');
      break;
    case error.TIMEOUT:
      alert('获取位置超时');
      break;
  }
}

3. 排查自定义标记失效的常见原因 #

如果添加标记后地图不显示，大概率是以下几个问题之一：

• 地图实例未正确初始化：确保map变量是已创建的Google Maps实例，且HTML中有对应的容器（比如<div id="map" style="width:100%;height:400px;"></div>）
• 自定义图标路径错误：检查icon属性的路径是否正确，相对路径要和当前HTML文件的位置对应，也可以用绝对路径测试
• API请求异常：查看浏览器控制台的错误信息，如果API返回REQUEST_DENIED，检查密钥是否有效、是否启用了Places API；如果是OVER_QUERY_LIMIT，则是请求次数超限
• Google Maps API未正确加载：确保HTML中已引入API脚本，且包含places库：

  <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR KEY HERE]&libraries=places&callback=initMap" async defer></script>
  

• 标记未绑定到正确的地图实例：确认map参数指向的是当前显示的地图对象，不要使用未定义的变量

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