Javascript 谷歌地图在拖动地图时加载其他标记
我创建了一个谷歌地图,其中标记通过Json加载。我已经做了很多研究,在拖动地图时加载其他标记,但是onClickCallback函数不会被触发。你能帮帮我吗Javascript 谷歌地图在拖动地图时加载其他标记,javascript,google-maps,Javascript,Google Maps,我创建了一个谷歌地图,其中标记通过Json加载。我已经做了很多研究,在拖动地图时加载其他标记,但是onClickCallback函数不会被触发。你能帮帮我吗 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQmgDjepa9e-ce16YlwjKBD9gJRfnQUEI&sensor=false"></script> <sc
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQmgDjepa9e-ce16YlwjKBD9gJRfnQUEI&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}
#latlng-control {
background: #ffc;
border: 1px solid #676767;
font-family: arial, helvetica, sans-serif;
font-size: 0.7em;
padding: 2px 4px;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
var map;
var infoWindow;
var bounds;
var markers = new Array();
var markers = [];
var lat = 47.2081;
var lon = 10.14175;
var zoom = 11;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: zoom,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, mapOptions);
// Define an info window on the map.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'tilesloaded', function () {
onClickCallback(map);
});
google.maps.event.addListener(map, "dragend", function() {
var bounds = this.getBounds();
onClickCallback(map);
});
}
function onClickCallback(map) {
var bounds = map.getBounds();
// clearOverlays();
$.getJSON( 'http://skiweather.eu/gmap4/markers/index.php', {
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) {
$.each( data.markers, function(i, marker) {
// Define Marker properties
var image = new google.maps.MarkerImage(marker.smallimg,
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(42, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);
$('#map').gmap('addMarker', { 'id' : marker.id,
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'icon' : image,
'bounds': true
}).click(function() {
$('#map').gmap('openInfoWindow', { 'content': '<h2>' + marker.loc + '</h2><img src="' + marker.smallimg + '" class="my-map-marker" />'
}, this);
});
});
});
return false;
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
</head>
<body>
<div id="map" style="width:500px;height:500px;"></div>
<div id="loading">
</div>
</body>
</html>
#地图{
宽度:800px;
高度:600px;
}
#车床控制{
背景:#ffc;
边框:1px实心#6767;
字体系列:arial、helvetica、无衬线字体;
字体大小:0.7em;
填充物:2px4px;
位置:绝对位置;
}
$(函数(){
var映射;
var信息窗口;
var界;
var markers=新数组();
var标记=[];
var lat=47.2081;
var-lon=10.14175;
var=11;
函数初始化(){
var mapOptions={
中心:新google.maps.LatLng(lat,lon),
缩放:缩放,
mapTypeControl:true,
mapTypeControlOptions:{
样式:google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
动物控制:对,
ZoomControl选项:{
样式:google.maps.ZoomControlStyle.SMALL
}
};
var mapDiv=document.getElementById('map');
var map=new google.maps.map(mapDiv,maptoptions);
//在地图上定义一个信息窗口。
var infoWindow=new google.maps.infoWindow();
google.maps.event.addListener(映射'tilesloaded',函数(){
onclick回调(map);
});
google.maps.event.addListener(映射,“dragend”,函数(){
var bounds=this.getBounds();
onclick回调(map);
});
}
函数onClickCallback(map){
var bounds=map.getBounds();
//clearOverlays();
$.getJSON('http://skiweather.eu/gmap4/markers/index.php', {
swLat:bounds.getSouthWest().lat(),swLon:bounds.getSouthWest().lng(),
neLat:bounds.getNorthEast().lat(),neLon:bounds.getNorthEast().lng()},函数(数据){
$.each(data.markers,function(i,marker){
//定义标记属性
var image=new google.maps.MarkerImage(marker.smallimg,
//该标记宽129像素,高42像素。
新google.maps.Size(42,42),
//此图像的原点为0,0。
新google.maps.Point(0,0),
//这张图片的锚定点是18,42处旗杆的底部。
新谷歌地图点(18,42)
);
$('#map').gmap('addMarker',{'id':marker.id,
“位置”:新的google.maps.LatLng(marker.lation,marker.longitude),
“图标”:图像,
“界限”:真
})。单击(函数(){
$('#map').gmap('openInfoWindow',{'content':''+marker.loc+'
},这个);
});
});
});
返回false;
}
google.maps.event.addDomListener(窗口“加载”,初始化);
});
我想如果你把它从'dragend'
改为'idle'
,它将有两个用途。它将在缩放事件和平移事件之后运行缩略图搜索
平移和缩放的边界都会更新吗
如果你想看到当前版本:这不是最简单的答案,所以我在这里添加它作为思考的食物。我结合使用了自定义覆盖和MyOverlay.draw()函数的原型。ajax调用发生在draw函数中。然后在dragend事件中调用MyOverlay.draw()。请看这里覆盖关系的代码示例谢谢Nick,我根据您的规格对脚本进行了更改。请看一看(尚未打印)我看到一些问题可以通过控制台进行故障排除。您有来自ajax的数据,需要添加自己的自定义标记和对话框。谷歌加载标记和对话框的效率很低。我已经开发了一个jQuery插件,它是为了加速标记和对话框加载而构建的。它还处理ajax位。我还没有通过github公开发布它。联系我这里的插件。是的,你的例子工程。但使用onClickCallback函数,它只触发两个具有相同边界的ajax调用。拖动不会导致调用新的bounds@mark我更新了小提琴,使之符合你想做的事。
getBounds
调用将在平移或缩放后获得可见区域。。。我以为那就是你要找的?