Question

我创建了一个Google地图，其中标记通过Json加载。在拖动地图时，我一直在进行大量研究以加载其他标记，但onClickCallback函数不会被触发。你能帮帮我吗？

 <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>

Answer 1

我认为如果您将其从'dragend'更改为'idle'，则会有两个目的。在缩放事件和平移事件之后，它将运行缩略图搜索。

平移和缩放都会更新

边界？

See here !Updated

拖动地图时，Google地图会加载其他标记

1 个答案: