使用 Google maps API 和 Google text Search 进行地理定位

Posted 2023-02-23

【中文标题】使用 Google maps API 和 Google text Search 进行地理定位

【英文标题】：Geolocation with Google maps API and Google text Search

【发布时间】：2015-02-24 21:01:09

【问题描述】：

我是从 VB 转换的 javascript 新手。这是我第一次尝试创建动态谷歌地图，最终尝试使用用户位置生成谷歌地图并应用地点搜索体育商店。目前我的地图生成并缩放到我的位置，但不应用带有标记的搜索结果。 这是我的代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

    <article>
      <p>Finding your location: <span id="status">checking...</span></p>
    </article>
<script>
function success(position) 
  var s = document.querySelector('#status');
  
  if (s.className == 'success') 
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
    return;
  
  
  s.innerhtml = "found you!";
  s.className = 'success';
  
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';
    
  document.querySelector('article').appendChild(mapcanvas);


  
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = 
    zoom: 10,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  ;
map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  var service;
  var infowindow;
 var request = 
    location: latlng,
    radius: '3200',
    query: 'sports'
  ;

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);


function callback(results, status) 
  if (status == google.maps.places.PlacesServiceStatus.OK) 
    for (var i = 0; i < results.length; i++) 
      var place = results[i];
      createMarker(results[i]);
    
  
 


function error(msg) 
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  
  // console.log(arguments);


if (navigator.geolocation) 
  navigator.geolocation.getCurrentPosition(success, error);
 else 
  error('not supported');


</script>

我觉得我可能遗漏了一些 var 分配，或者没有从“地图画布”重写当前地图。有没有人创造了类似的东西来提供一些见解？非常感谢任何帮助，以找出为什么我的搜索结果不会显示在地图上。谢谢！

【问题讨论】：

查询响应是什么样的？请提供一个Minimal, Complete, Tested and Readable example，以证明您在问题本身中的问题。使用posted code，我得到“查找您的位置：失败”

@geocodezip 我得到的回复可以在页面底部的Code Example 找到。

我也收到“查找您的位置：失败”。无法使用您的示例调试实际问题。

@geocodezip 这一定是您浏览器上的设置，我刚刚检查了两种状态的当前输出，一旦授予位置访问权限，它就可以工作。这是一个指向我抛出的页面的链接，以将输出显示为图像。 see current map

这绝对是我浏览器的设置。我否认地理位置。

【参考方案1】：

您的代码有效，但您缺少createMarker 函数。这不是 API 方法。

Uncaught ReferenceError: createMarker is not defined

createMarker 函数示例：

function createMarker(place) 

    new google.maps.Marker(
        position: place.geometry.location,
        map: map
    );

注意：如果您只需要该函数中的位置，您也可以这样调用并修改它：

function callback(results, status) 
    if (status == google.maps.places.PlacesServiceStatus.OK) 
        for (var i = 0; i < results.length; i++) 
            var place = results[i];
            console.log(place);
            createMarker(results[i].geometry.location); // pass only the location to createMarker
        
    


function createMarker(position) 

    new google.maps.Marker(
        position: position,
        map: map
    );

JSFiddle demo

【讨论】：

太棒了！如果有帮助，请不要忘记接受/赞成这个答案。

只要我能做到，我很乐意。我的代表是 9 岁，需要 15 岁。