根据标记在另一张地图中的拖动来更新地图中心
update map center depending on a marker drag in another map
我在同一页面上有 3 张来自谷歌地图 API 的地图。一个主要的,比其他两个更宽,有一个搜索字段来查找一个城市。上面有一个标记。我希望用户在移动标记时"筛选"该区域,并将结果显示在其他 2 张地图上。
例如,用户搜索纽约市,主地图将以12的缩放比例显示城市。另外 2 个点相同,但变焦为 17 和 18。我希望一旦用户在主地图上移动标记,这两个就会更新那里的位置。例如,如果他将标记拖到布鲁克林大桥上方,主窗口将不会移动,但其他两个窗口将集中在布鲁克林大桥上。
我有以下代码,在文本框 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>
感谢您的帮助
使用 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>
相关文章:
- 启用/禁用在谷歌地图上拖动标记
- 如何将可拖动的谷歌地图标记的地址传递到输入字段中
- 谷歌地图拖动标记问题
- 地图中的可拖动标记
- 如何在谷歌地图javascript中在地图上拖动标记(可拖动方向)时显示更新的坐标
- 谷歌地图api拖动路线再次回到原来的位置
- 谷歌地图:想在设置draggable为true后直接拖动地图
- 如何在javascript中基于谷歌地图上的位置拖动来更改值
- 谷歌地图路线拖动后的路线边界
- 谷歌地图在滚动时拖动
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图可编辑多边形过滤器 从set_at事件中拖动事件
- Google 地图拖动事件不会捕获中心更改,直到拖动在 Chrome 设备模式下结束
- 谷歌地图绘制 - 通过拖动绘制线条或多边形
- 延迟以防止对地图拖动进行多个ajax调用
- Ng地图拖动标记后获取地址
- 谷歌地图拖动矩形来选择标记
- 谷歌地图-拖动标记,GetPosition总是返回相同的位置
- 谷歌地图拖动阈值
- 是否有任何方法来同步地图拖动在谷歌地图API V3