javascript - 使用Google Maps API和Google文本搜索进行地理位置定位

我是VB进行javascript转换的新手。这是我创建动态Google地图的第一步，并最终尝试使用用户位置生成Google地图并为体育用品店应用地点搜索。目前，我的地图会生成并缩放到我的位置，但不会将搜索结果与标记一起应用。
这是我的代码：

<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 demo

关于javascript - 使用Google Maps API和Google文本搜索进行地理位置定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28706144/