我在同一页面上有来自谷歌地图API的3张地图。一个主要的,比其他2个更宽的搜索字段来查找城市。它上面有一个标记。我希望用户在移动标记时“屏蔽”该区域,并在其他2个地图上显示结果。
例如,用户搜索纽约市,主地图将显示缩放为12的城市。另外2个相同的点,但缩放为17和18.我希望那些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>
感谢您的帮助
答案 0 :(得分:2)
使用Dragend事件
<script>
$(function(){
var latlng = new google.maps.LatLng(43.723, -79.498);
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);
});
google.maps.event.addListener(marker, 'dragend', function () {
var newPosition = marker.getPosition();
map_sat.setCenter(newPosition);
map_zoom.setCenter(newPosition);
});
$('#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>