Как я могу вызвать функцию в Google Map для инициализации из jQuery?

Question

Мне кажется, у меня проблемы с областью действия. У меня следующая проблема.

У меня есть вход, в который пользователи вводят радиус. В jQuery у меня есть слушатель, который проверяет keyup () в этом поле ввода. Затем у меня есть карта Google, которая рисует круги в зависимости от заданного радиуса. Это работает, находя вызов функции jquery, которая передает ему радиус, когда маркер на карте перетаскивается, НО я хочу также вызвать функцию в картах Google, которая рисует круги на keyup () в jquery. Вкратце: Я хочу вызвать функцию за пределами jquery в google maps, инициализировать мое событие keyup.

Код:

<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 Maps следующим образом:

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();