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

How can I call a function in Google Map in initialize from within jQuery?

本文关键字:Map 函数 Google 初始化 jQuery 调用      更新时间:2023-09-26

我认为我有一些范围问题。我有以下问题。

我有一个输入,用户输入了一个半径。在jQuery中,我有侦听器检查输入框上的keyup()。然后我有一个谷歌地图,根据给定的半径绘制圆圈。它的工作发现调用一个jquery函数,传递它的半径时,地图上的标记被拖拽,但我想也调用函数,这是在谷歌地图上绘制的圆圈在keyup()在jquery。在短暂的: 我想在谷歌地图初始化我的keyup事件的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);
    }
  }
}

像这样包装你的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();