使用谷歌地图API和谷歌文本搜索进行地理定位

Geolocation with Google maps API and Google text Search

本文关键字：定位 搜索 文本 谷歌地图 API 谷歌      更新时间：2024-04-22

我是从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赋值，或者没有从"地图画布"中重写当前地图。有人创造了类似的东西来提供一些见解吗？如果能找到我的搜索结果不会显示在地图上的原因，我们将不胜感激。谢谢

您的代码可以工作，但缺少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演示

相关文章：