Google Map API - 在当前地图上自动完成搜索

时间:2014-10-31 22:49:06

标签: javascript jquery google-maps google-maps-api-3

我有一张有自己数据集的地图 - 所以它从外部API加载其他信息,填写自定义谷歌地图。

我正在使用谷歌的自动选择功能,所以当用户搜索某个地址或位置时,他们会在当前地图上放大(不会丢失所有数据点)

所以使用这个函数,输出是正确的:

London 51.5073509 -0.12775829999998223 6 

我的问题 - 查询是,如何获得以下内容:

console.log(defaultArea + ' ' + defaultLat + ' ' + defaultLng + ' ' + defaultZoom);

进入当前地图。

我已经尝试过 - 仍然无法工作。

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

目前的JQUERY:

var defaultLat = 54
defaultLng = -4,
defaultZoom = 6,
defaultArea = null;

function searchFunct() {
    var input = document.getElementById('location');
    var options = {
      types: ['(regions)'],
      componentRestrictions: {
          country: 'uk'
      }
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        document.getElementById('city2').value = place.name;
        document.getElementById('cityLat').value = place.geometry.location.lat();
        document.getElementById('cityLng').value = place.geometry.location.lng();

        var citi = document.getElementById('city2').value;
        var lati = document.getElementById('cityLat').value;
        var longi = document.getElementById('cityLng').value;

        defaultArea = citi;
        defaultLat = lati;
        defaultLng = longi;
        defaultZoom = 6;

        console.log(defaultArea + ' ' + defaultLat + ' ' + defaultLng + ' ' + defaultZoom);

    });
}

1 个答案:

答案 0 :(得分:1)

console.log

下添加以下内容

我所做的就是声明一个变量,用于定义Google地图变量latitude中的longitudegoogle.maps.LatLng。其次,声明了一个myOptions对象来定义输入的位置。最后,绘制map_canvas上的所有内容并在其上添加标记。

var latlng = new google.maps.LatLng(defaultLat, defaultLng);
var myOptions = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
   myOptions);

marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Main map'
});