使用谷歌地图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和谷歌文本进行地理定位搜索

回答

相关问题