谷歌地点搜索标记未显示在地图上答案

【问题标题】：Google place search markers not showing on map谷歌地点搜索标记未显示在地图上
【发布时间】：2014-08-26 16:50:25
【问题描述】：

我正在编写一个演示，说明我希望未来的搜索功能如何工作。我想在地址或区域上查询谷歌并返回区域范围以及附近的地方。为此，我使用了地点自动完成、地理编码和地点搜索。

到目前为止，我已成功获得预测的搜索查询，从而在我的地图上将边界绘制为矩形。但是，当我尝试为地点搜索结果实施标记时，我的地图上没有出现任何标记。我知道搜索正在工作，因为在每个位置的 createMarker 函数中放置一个警报会返回几个与我所在区域一致的纬度/经度。

我怀疑地图对象可能没有被传递给我的 createMarker 函数，但在涉及 Javascript 时我是一个菜鸟。我尝试传递一个额外的参数，但效果不大。

应该注意的是，当我尝试只创建一个静态标记时，我可以在初始化函数中创建一个标记。

编辑：我已经删除了地点搜索请求的类型参数，但即使使用参数 ['store']，代码也不起作用。

var map;
var infowindow;


function initialize() {

var view_lat = document.getElementById('view_lat').value;
var view_lng = document.getElementById('view_lng').value;
var focus = new google.maps.LatLng(view_lat,view_lng);
var swlat = document.getElementById('swlat').value;
var swlng = document.getElementById('swlng').value;
var nelat = document.getElementById('nelat').value;
var nelng = document.getElementById('nelng').value;
var map_canvas = document.getElementById('map-canvas_embed');
var map_options = {
    center: new google.maps.LatLng(parseFloat(view_lat), view_lng),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mysw = new google.maps.LatLng(swlat,swlng)

var map = new google.maps.Map(map_canvas, map_options)
var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng))
});
var request = {
    location: focus,
    radius: 500

};

var place_search = new google.maps.places.PlacesService(map);
place_search.nearbySearch(request,callback)



}

处理来自 google 地方搜索的结果

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {

      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
var placeLoc = place.geometry.location;

var marker = new google.maps.Marker({

    position: place.geometry.location
});
marker.setMap(map);
}

自动完成变量

var input = document.getElementById('location');
var options = {
    componentRestrictions: {country: 'se'},
    types: ['geocode']
}
var searchform = document.getElementById('searchform');
var place;
var autocomplete = new google.maps.places.Autocomplete(input, options);

添加侦听器以检测自动完成选择

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    place = autocomplete.getPlace();
    //console.log(place);
});

将侦听器添加到搜索（此函数不起作用，因此我在初始化函数中进行了解决）

searchform.addEventListener("submit", function() {
    var newlatlong = new       google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
    map.setCenter(newlatlong);
    marker.setPosition(newlatlong);
    map.setZoom(12);
    google.maps.event.trigger(map, 'resize');

});

点击后重置输入框

input.addEventListener('click', function(){
    input.value = "";
});

调用初始化函数

google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

你能把它添加为 jsfiddle 什么的吗？
+1 用于 JSFiddle。否则无法理解您的 sn-ps 的交互。例如，在 submit 事件监听器中，您访问了一个未在任何地方定义的全局变量 marker。
我正在尝试，但该演示基于 python 提供的 Jinja2 母版页。如果我设法创建一个 JSfiddle，我会再次发表评论。我知道代码交互很难理解。我知道提交事件监听器没有正常工作，这不是我现在主要关心的问题。我主要想知道为什么我的 createMarker 函数不起作用。
example of places search showing markers（虽然没有自动完成...）
当你说的代码是以searchform.addEventListener("submit",..开头的代码时，你在哪里取消表单提交（通常会重新加载页面）？

标签： javascript google-maps google-maps-api-3 google-places-api

【解决方案1】：

确实看起来是 JavaScript 作用域的问题。

考虑一下你的这些代码行：

    function initialize() {
      //...
      var map = new google.maps.Map(map_canvas, map_options)
      //...
     }

在 initialize 函数内声明 map 会使您的 map 变量无法从您的 initialize 函数中访问。

因此，当您尝试在 searchform 中访问它时，map.setCenter() 将在您的控制台中显示 map 未定义。

您可以通过多种方式解决您的问题。

在脚本开头声明map（无论如何，在执行initialize之前）
在initialize() 函数中声明searchform.addEventListener("submit", function(){}) 并在initialize() 结束执行之前使用它。

【讨论】：