使用Google Maps API的Places库时遇到问题，附相关代码

嘿，我看了你这段调用Google Maps Places库的代码，发现几个明显的问题，咱们来逐个解决：

主要问题点 #

• 地图类型ID拼写错误：你写的google.maps.MapTypeId.READMAP是错的，正确的常量应该是google.maps.MapTypeId.ROADMAP，这个拼写错误会导致地图无法正确渲染指定的地图类型。
• PlacesService实例化代码不完整：你的service = new google.maps.places.PlacesService(map...语句没写完，缺少闭合的括号和分号，这会直接导致语法错误，让代码无法正常执行。
• 潜在的异步依赖问题：要确保Google Maps的脚本已经加载完成，再执行定位和地图初始化逻辑，否则会出现google未定义的报错。

修正后的完整代码示例 #

var map;
var service;
var index = 0;
var posArray = [];

$(document).ready(function(){
  // 先检查Google Maps脚本是否加载完成
  if (typeof google !== 'undefined' && google.maps) {
    navigator.geolocation.getCurrentPosition(init);
  } else {
    console.error("Google Maps脚本未加载完成，请检查引入配置");
  }
});

function init(location) {
  // 执行你的自定义启用逻辑
  enable();
  
  var currentLocation = {
    lat: location.coords.latitude,
    lng: location.coords.longitude
  };
  
  var mapOptions = {
    center: currentLocation,
    zoom: 10,
    // 修正地图类型ID的拼写错误
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  // 初始化地图实例
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  // 完整实例化PlacesService
  service = new google.maps.places.PlacesService(map);
  
  // 示例：添加Places API的附近搜索逻辑（你可以根据需求修改）
  var searchRequest = {
    location: currentLocation,
    radius: 5000, // 搜索半径，单位米
    type: ['cafe'] // 搜索类型，这里以咖啡馆为例
  };
  
  // 调用搜索并处理结果
  service.nearbySearch(searchRequest, handleSearchResults);
}

// 定义搜索结果的回调函数
function handleSearchResults(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    results.forEach(place => {
      // 这里可以添加标记、弹窗等交互逻辑
      console.log(`找到地点：${place.name}`);
    });
  } else {
    console.error(`Places搜索失败：${status}`);
  }
}

额外注意事项 #

• 确保你在HTML中正确引入带API密钥和Places库的脚本：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>
  

• 要在Google Cloud控制台中启用Places API，并确保API密钥有对应的权限，否则会收到权限错误。

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