这是我的第一篇文章,我希望能得到一些帮助,因为我对开发领域相对较新,请原谅我,如果我的问题有点愚蠢。
我正在尝试从html中的下拉列表中创建一个实现依赖关系的仪表板 - 假设根据所选的下拉列表值,应该更新包含谷歌地图引用的div标签。
例如:
我从下拉列表中选择了一个大陆,然后Google会在该区域上移动视图,稍后会在地图上显示自定义兴趣点。有人可以帮助我或建议可能的解决方案吗?
谢谢!
答案 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>