jQuery Location Picker Plugin放大

时间:2018-08-24 12:26:21

标签: javascript jquery google-maps jquery-plugins

如何在jQuery Location Picker插件中获取zoom属性?我可以使用<div id="myTooltip" class="icon material-icons">info</div> <div class="mdl-tooltip mdl-tooltip--large" for="myTooltip"> <a href="#">Here</a> is the further information. </div> currentLocation.latitude来获取地图坐标,但是没有人知道如何获取zoom属性吗?

currentLocation.longitude

当我尝试$('#the-map').locationpicker({ location: {latitude: 46.15242437752303, longitude: 2.7470703125}, radius: 300, onchanged: function(currentLocation, radius, isMarkerDropped) { alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")"); } 时,我不确定。

1 个答案:

答案 0 :(得分:1)

由于该插件不支持该地图事件,因此您必须自己将其绑定...

google.maps.event.addDomListener(window, 'load', function() {

  $('#map_canvas').locationpicker({
      location: {latitude: 40.7324319, longitude: -73.82480777777776},
      radius: 300
  });

  /* bind the zoom_changed event for the plugin's map handle */
  $('#map_canvas').data('locationpicker').map.addListener('zoom_changed', function() {
    var map = $('#map_canvas').data('locationpicker').map;
    console.log('zoom level: ' + map.getZoom());
  });

});
html, body, #map_canvas {height: 100%; width: 100%; margin: 0px; padding: 0px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="//rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script>
<div id="map_canvas"></div>