如何访问google map api中的变量以在每个函数中使用

时间:2016-05-09 08:40:41

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

我在使用谷歌地图搜索的自动完成时遇到问题。这是我正在尝试的

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //add map, the type of map
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 6,
        center: haight,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'));

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();      
    });

    alert(lat);
}

如果我尝试从addlistner函数生成警报,它不起作用,但它在addlistner内部工作。有什么方法可以访问这个addlistner中的lat,lng吗?

还可以在运行时使用变量lat,lng在initialize函数之外吗?

修改

var markers = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(lat, lng),
  title: 'Point of origin'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 1000*10,    // metres
  fillColor: '#AA0000'
});

circle.bindTo('center', markers, 'position');

我想使用lat,lng变量来创建用于生成特定纬度和经度的圆圈的标记。

1 个答案:

答案 0 :(得分:1)

尝试类似的东西:

var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //add map, the type of map
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 6,
        center: haight,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'));

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

        markerAndCircle(lat, lng);
    });
}

function markerAndCircle(lat, lng) {

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        title: 'Point of origin'
    });

    // Add circle overlay and bind to marker
    var circle = new google.maps.Circle({
        map: map,
        center: new google.maps.LatLng(lat, lng),
        radius: 1000 * 10, // metres
        fillColor: '#AA0000'
    });
}

这是未经测试的。如果它不起作用,请在javascript控制台中查看错误并在此处报告。

注意:map变量现在在initialize函数之外声明,因为我们在markerAndCircle函数中需要它。