Question

我正在编写一个关于我希望将来的搜索功能如何工作的演示。我想在地址或区域上查询谷歌并返回区域边界以及附近的地方。为此，我使用地点自动填充，地理编码和地点搜索。

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

我怀疑地图对象可能没有被传递给我的createMarker函数，但是当涉及到Javascript时，我有点像菜鸟。我尝试传递一个额外的参数，但它没有做太多。

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

编辑：我删除了地点搜索请求的类型参数，但即使使用参数[＆＃39;存储＆＃39;]，代码也不起作用。

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)



}

处理谷歌搜索结果

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);

Answer 1

确实，它看起来像是JavaScript的范围问题。

请考虑以下代码行：

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

在map函数中声明initialize会使map变量无法从initialize函数中移除。

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

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

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

Google地方搜索标记未在地图上显示

1 个答案: