基于html下拉列表的Google Maps依赖项

时间:2014-09-29 14:14:34

标签: javascript html google-maps maps

这是我的第一篇文章,我希望能得到一些帮助,因为我对开发领域相对较新,请原谅我,如果我的问题有点愚蠢。

我正在尝试从html中的下拉列表中创建一个实现依赖关系的仪表板 - 假设根据所选的下拉列表值,应该更新包含谷歌地图引用的div标签。

例如:

我从下拉列表中选择了一个大陆,然后Google会在该区域上移动视图,稍后会在地图上显示自定义兴趣点。有人可以帮助我或建议可能的解决方案吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

确保包含Google Maps Javascript API(我假设您已经这样做了):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

JS:

var map;
var geocoder;

function initialize() {
    var mapOptions = {
        center:            new google.maps.LatLng(-34.397, 150.644),
        zoom:              10,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
    $('input.maps-input').on('change', function() {
        geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK)
                map.setCenter(results[0].geometry.location);
            else
                alert('A location could not be found. ' + status);
        });
    });
});

然后向您的页面添加一个带有类maps-input的下拉列表(或任何类型的输入)和一个带有类map-canvas的div(当然您可以将这些类名更改为您想要的任何内容)。< / p>