我在同一页面上有 3 张来自谷歌地图 API 的地图。一个主要的,比其他 2 个更宽,带有用于查找城市的搜索字段。上面有一个标记。我希望用户在移动标记时“筛选”该区域,结果显示在其他 2 个地图上。
例如,用户搜索纽约市,主地图将以 12 的缩放比例显示该城市。另外 2 个在同一点但缩放为 17 和 18。我希望一旦用户移动,那 2 个更新那里的位置主地图上的标记。例如,如果他将标记拖到布鲁克林大桥上方,主窗口不会移动,但其他 2 个窗口将聚焦在布鲁克林大桥上。
我有以下代码,在文本框 id=location 中搜索后,它可以很好地将 3 个地图集中在同一点上,但我不知道在哪里添加无法根据标记拖动进行更新的函数.
HTML
<div id="gmap" style="width:500px; height:500px;"></div>
<div id="gmap_sat" style="width:250px; height:150px;"></div>
<div id="gmap_zoom" style="width:250px; height:150px;"></div>
JS
<script type="text/javascript">
$(function(){
var latlng = new google.maps.LatLng(<?php echo $latlng?>);
var map = new google.maps.Map(document.getElementById('gmap'),{
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map_zoom = new google.maps.Map(document.getElementById('gmap_zoom'),{
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map_sat = new google.maps.Map(document.getElementById('gmap_sat'),{
zoom: 18,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var marker = new google.maps.Marker({
position : latlng,
map : map,
title : 'Select a location',
draggable : true
});
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(marker,'drag',function(){
setPosition(marker);
});
$('#location').keypress(function(e){
if(e.keyCode==13){
var request = {
address : $(this).val()
}
geocoder.geocode(request,function(results, status){
if(status == google.maps.GeocoderStatus.OK){
var pos = results[0].geometry.location;
map.setCenter(pos);
map_zoom.setCenter(pos);
map_sat.setCenter(pos);
marker.setPosition(pos);
setPosition(marker);
}
});
return false;
}
})
});
function setPosition(marker){
var pos = marker.getPosition();
$('#latitude').val(pos.lat());
$('#longitude').val(pos.lng());
}
</script>
谢谢您的帮助