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

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

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

來源

2015-02-24 radcp

查詢響應是什麼樣的？請提供一個[最小，完整，已測試和可讀的示例]（http://stackoverflow.com/help/mcve），它可以在問題本身中說明您的問題。使用[發佈的代碼]（http://jsfiddle.net/4vk6nco8/），我得到「查找您的位置：失敗」 – geocodezip 2015-02-24 22:26:20

@geocodezip我得到的迴應可以在[代碼示例]中找到（http：// www .cellphonerepairhq.com/local-repair /）在頁面底部。 – radcp 2015-02-24 23:08:28

我也得到了「找到你的位置：失敗」。無法調試您的示例的實際問題。 – geocodezip 2015-02-24 23:10:18

您的代碼有效，但您缺少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

來源

2015-02-25 07:27:48 MrUpsidown

太棒了！如果它有幫助，不要忘記接受/ upvote這個答案。 – MrUpsidown 2015-02-26 06:54:57

只要我能夠，我很樂意。我的代表是9歲，需要15歲。 – radcp 2015-02-27 12:55:35

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

回答

相關問題