谷歌地图动态数据.改变

Question

我有一个简单的选择表单，这样用户就可以选择在地图上显示的类别，如下所示：

<select name="kat" id="kat">
<option value="0" selected>CATEGORY</option>
<option value="1" selected>Foo</option>
<option value="2" selected>Bar</option>
</select>
<div id="map"></div>

以及JS:

function load() {
$("#kat").change(function () {
var kat = $("#kat").val();
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(56.311967, 15.023375),
    zoom: 9,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;
  var hoverWindow = new google.maps.InfoWindow;
  var marker; 
    downloadUrl("data.php?kat="+kat+"", function(data) {
    var overlays = [];
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var id = markers[i].getAttribute("id");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<h3>" + name + "</h3>" + address;
      var infohtml = "<b>" + name + "</b>";
      var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: point
      });
      bindHoverWindow(marker, map, hoverWindow, infohtml, infoWindow);  
      bindInfoWindow(marker, map, infoWindow, html, hoverWindow);
    }
  });
  });
}

这一切都很顺利。但我的问题是：

如何让地图加载data.php？kat=0

第一次加载页面时？（没有.change函数？

Answer 1

function load() {
    // Make a reusable function to feed differing categories to the map.
    function loadMap(category) {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(56.311967, 15.023375),
            zoom: 9,
            mapTypeId: 'roadmap'
        });
        var infoWindow = new google.maps.InfoWindow();
        var hoverWindow = new google.maps.InfoWindow();
        var marker;
        downloadUrl("data.php?kat=" + category + "", function (data) {
            var overlays = [];
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("name");
                var id = markers[i].getAttribute("id");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                var html = "<h3>" + name + "</h3>" + address;
                var infohtml = "<b>" + name + "</b>";
                var marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: point
                });
                bindHoverWindow(marker, map, hoverWindow, infohtml, infoWindow);
                bindInfoWindow(marker, map, infoWindow, html, hoverWindow);
            }
        });
    }
    // Add the `change` listener
    $("#kat").change(function () {
        var kat = $("#kat").val();
        //Reload the map with new category on `change`
        loadMap(kat);
    });
    // Load map initially with category `0`
    loadMap(0);
}