使用谷歌地圖API和谷歌文本進行地理定位搜索

Question

我是新來的JavaScript從VB轉換。這是我創建一個動態谷歌地圖的第一步，並試圖通過使用用戶位置生成谷歌地圖並應用體育商店的地點搜索。目前我的地圖會生成並縮放到我的位置，但不會將搜索結果與標記一起應用。 這裏是我的代碼：

<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分配或不寫上從「地圖畫布」當前地圖。有沒有人創造出類似的東西來提供一些見解？任何幫助非常感謝，找到爲什麼我的搜索結果不會顯示在地圖上。謝謝！

Answer 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