Question

我相信我有一些范围问题。我有以下问题。

我有一个用户输入半径的输入。在jQuery中，我有监听器检查该输入框上的keyup（）。然后我有一个谷歌地图，根据给定的半径绘制圆圈。它的工作原理是调用一个jquery函数，当拖动地图上的标记时将其传递给半径但是我还要调用google地图中的函数，该函数在jquery中的keyup（）上绘制圆圈。 简而言之： 我想在我的keyup事件中初始化google maps中调用jquery之外的函数。

代码：

<script type="text/javascript">

var radius;
var rad;
var unit_conversion;
var unit;
$(function() {
 $('#search-radius').keyup(function() {
  $.getRadius();

//TRYING TO CALL FUNCTION THAT IS WITHIN gmap.js -> initialize -> setOverlay();
    setOverlay();

  alert("change");
});

$.getRadius = function get_radius() {
  var rad = $("#search-radius").val();
  var unit = $("#search-unit").val();
  var unit_conversion = {"km": 1000, "yrd": 1.09361 ,"mi": 1609.344};

  switch (unit) {
  case "m":
    window.radius = rad;
  break;
  case "km":
    window.radius = rad * unit_conversion[unit];
  break;
  case "yrd":
    window.radius = rad * unit_conversion[unit];
  break;
  case "mi":
    window.radius = rad * unit_conversion[unit];
  break;
  default: 
    alert("Unit Type Error");
  }     
  alert (window.radius);
  return window.radius;
 }


});  
</script>

gmaps.js

// Google Maps

var marker_lat_lang;
var search_areas = [];
var current_radius;

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("gmap"),
        myOptions);

  //Set up marker
  var marker = new google.maps.Marker({
      position: myOptions.center,
      draggable: true, 
      map: map,
      title:""+ marker_lat_lang +""
  });


  // When user finishes dragging get lat long of marker
  google.maps.event.addListener(marker, 'dragend', function(){ 
    setOverlay();
  });

  // Deletes all markers in the array by removing references to them
  function deleteOverlays() {
    if (search_areas) {
      for (i in search_areas) {
        search_areas[i].setMap(null);
      }
    search_areas.length = 0;
    }
  }  
//FUNCTION TRYING TO BE CALLED. Contains gmaps api stuff so can't seem to call in global space. 
    function setOverlay() {
      var marker_lat = marker.position.lat();
      var marker_lng = marker.position.lng();

      $.getradius();
      var current_radius = window.radius;
      var radius = parseFloat(window.radius);
      deleteOverlays();
      marker_lat_lang = new google.maps.LatLng(marker_lat, marker_lng);
      // Draw circle for radius
      var search_area_options = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: marker_lat_lang,
        radius: radius
      };
      search = new google.maps.Circle(search_area_options);
      search_areas.push(search);  
    }  

  // Bounce UI control
  google.maps.event.addListener(marker, 'click', toggleBounce);

  function checkRadius() {
    alert ("CR" + current_radius + "WR" + window.radius);
    if ( current_radius != window.radius) {

      setOverlay();
    }
  }

  function deleteOverlay (overlay) {
    overlay.setMap(null);
  }

  function toggleBounce() {
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

}

Answer 1

将您的Google地图代码包装成如下：

var GoogleMaps=GoogleMaps ||  (function(){
var marker_lat_lang;
var search_areas = [];
var current_radius;

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("gmap"),
        myOptions);

  //Set up marker
  var marker = new google.maps.Marker({
      position: myOptions.center,
      draggable: true, 
      map: map,
      title:""+ marker_lat_lang +""
  });


  // When user finishes dragging get lat long of marker
  google.maps.event.addListener(marker, 'dragend', function(){ 
    setOverlay();
  });

  // Deletes all markers in the array by removing references to them
  function deleteOverlays() {
    if (search_areas) {
      for (i in search_areas) {
        search_areas[i].setMap(null);
      }
    search_areas.length = 0;
    }
  }  
//FUNCTION TRYING TO BE CALLED. Contains gmaps api stuff so can't seem to call in global space. 
    function setOverlay() {
      var marker_lat = marker.position.lat();
      var marker_lng = marker.position.lng();

      $.getradius();
      var current_radius = window.radius;
      var radius = parseFloat(window.radius);
      deleteOverlays();
      marker_lat_lang = new google.maps.LatLng(marker_lat, marker_lng);
      // Draw circle for radius
      var search_area_options = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: marker_lat_lang,
        radius: radius
      };
      search = new google.maps.Circle(search_area_options);
      search_areas.push(search);  
    }  

  // Bounce UI control
  google.maps.event.addListener(marker, 'click', toggleBounce);

  function checkRadius() {
    alert ("CR" + current_radius + "WR" + window.radius);
    if ( current_radius != window.radius) {

      setOverlay();
    }
  }

  function deleteOverlay (overlay) {
    overlay.setMap(null);
  }

  function toggleBounce() {
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

  return {
    initialize:initialize,
    setOverlay:setOverlay
 };

}

}());

现在您可以将该功能调用为

GooleMaps.initialize();
GoogleMaps.setOverlay();

如何从jQuery中初始化中调用Google Map中的函数？

1 个答案: