[英]Google maps load additional markers when map is dragged
I've created a Google Map where markers are loaded via Json. 我创建了一个Google地图,其中通过Json加载了标记。 I have been doing a lot of research to load additional markers when the map is dragged, but the function onClickCallback does not get fired. 我一直在做很多研究,以在拖动地图时加载其他标记,但是不会触发onClickCallback函数。 Would you please help me? 你能帮我吗?
<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>
I think if you changed it from 'dragend'
to 'idle'
it would serve two purposes. 我认为,如果将其从'dragend'
更改为'idle'
则有两个目的。 It would run the search for thumbnails after a zoom event and a pan event. 它将在缩放事件和平移事件之后运行缩略图搜索。
bounds are updated for both pan and zoom? 平移和缩放的边界是否已更新?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.