2

使用 google maps api(利用新的“Places Library”)我试图:

  1. 显示具有特定经度和纬度的地图。成功完成
  2. 显示一个下拉列表,其中包含 Google 可以搜索的所有可用商店类型。成功完成
  3. 检测下拉选择何时更改并更改 setlocationtype() 函数中的“类型”值。
  4. 因此,地图应根据下拉列表选择显示所有可用的位置类型(即邮局、加油站等)。

难住了。我希望我没有转储太多代码。我想我应该尽可能彻底地解释一切以获得正确的结果。

提前致谢

  var map;
  var infowindow;



  function populateselect(){

        var placetype = [];
        placetype[0] ="accounting";
        placetype[1] ="airport";
        placetype[2] ="amusement_park";
        placetype[3] ="aquarium";
        placetype[4] ="art_gallery";
        placetype[5] ="atm";
        placetype[6] ="bakery";
        placetype[7] ="bank";
        placetype[8] ="bar";
        placetype[9] ="beauty_salon";
        placetype[10] ="bicycle_store";
        placetype[11] ="book_store";
        placetype[12] ="bowling_alley";
        placetype[13] ="bus_station";
        placetype[14] ="cafe";
        placetype[15] ="campground";
        placetype[16] ="car_dealer";
        placetype[17] ="car_rental";
        placetype[18] ="car_repair";
        placetype[19] ="car_wash";
        placetype[20] ="casino";
        placetype[21] ="cemetery";
        placetype[22] ="church";
        placetype[23] ="city_hall";
        placetype[24] ="clothing_store";
        placetype[25] ="convenience_store";
        placetype[26] ="courthouse";
        placetype[27] ="dentist";
        placetype[28] ="department_store";
        placetype[29] ="doctor";
        placetype[30] ="electrician";
        placetype[31] ="electronics_store";
        placetype[32] ="embassy";
        placetype[33] ="establishment";
        placetype[34] ="finance";
        placetype[35] ="fire_station";
        placetype[36] ="florist";
        placetype[37] ="food";
        placetype[38] ="funeral_home";
        placetype[39] ="furniture_store";
        placetype[40] ="gas_station";
        placetype[41] ="general_contractor";
        placetype[42] ="geocode";
        placetype[43] ="grocery_or_supermarket";
        placetype[44] ="gym";
        placetype[45] ="hair_carev";
        placetype[46] ="hardware_store";
        placetype[47] ="health";
        placetype[48] ="hindu_temple";
        placetype[49] ="home_goods_store";
        placetype[50] ="hospital";
        placetype[51] ="insurance_agency";
        placetype[52] ="jewelry_storev";
        placetype[53] ="laundry";
        placetype[54] ="lawyer";
        placetype[55] ="library";
        placetype[56] ="liquor_store";
        placetype[57] ="local_government_office";
        placetype[58] ="locksmith";
        placetype[59] ="lodging";
        placetype[60] ="meal_delivery";
        placetype[61] ="meal_takeaway";
        placetype[62] ="mosque";
        placetype[63] ="movie_rental";
        placetype[64] ="movie_theater";
        placetype[65] ="moving_company";
        placetype[66] ="museum";
        placetype[67] ="night_club";
        placetype[68] ="painter";
        placetype[69] ="park";
        placetype[70] ="parking";
        placetype[71] ="pet_store";
        placetype[72] ="pharmacy";
        placetype[73] ="physiotherapist";
        placetype[74] ="place_of_worship";
        placetype[75] ="plumber";
        placetype[76] ="police";
        placetype[77] ="post_office";
        placetype[78] ="real_estate_agency";
        placetype[79] ="restaurant";
        placetype[80] ="roofing_contractor";
        placetype[81] ="rv_park";
        placetype[82] ="school";
        placetype[83] ="shoe_store";
        placetype[84] ="shopping_mall";
        placetype[85] ="spa";
        placetype[86] ="stadium";
        placetype[87] ="storage";
        placetype[88] ="store";
        placetype[89] ="subway_station";
        placetype[90] ="synagogue";
        placetype[91] ="taxi_stand";
        placetype[92] ="train_station";
        placetype[93] ="travel_agency";
        placetype[94] ="university";
        placetype[95] ="veterinary_care";
        placetype[96] ="zoo";


        var select = document.getElementById("selectPlace");

        //var preselected = document.getElementById(playtype["mosque"]);
        //preselected.selected = true;

        for(var i = 0; i < placetype.length; i++) {
            var opt = placetype[i];
            var el = document.createElement("option");
            el.textContent = opt.replace("_"," ");
            el.value = opt;
            select.appendChild(el);
        }

    }




    //Create Function that will initialize that map and get things moving  
    function initialize() {
    //Set the Latitude and Longitude coordinates that the map will be centered
    //on. 
    var pyrmont = new google.maps.LatLng(39.0724, -76.7902);

    //Create our map and grab the DOM id and populate our map to the DOM id 
    //specified or passed to the map object. Also we are passing in our map 
    //options ex. zoom, MapType, etc.
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 10
    });


  }


  function setlocationtype(){

    //Set the request options. These options will be passed to the places 
    //object to we can search for a specific establishment type 
    //(ie. Store, accountant, hospital, police, etc.

    var si = document.getElementById("selectPlace").selectedIndex;
    var op = document.getElementById("selectPlace").options;
    var pyrmont = new google.maps.LatLng(39.0724, -76.7902);
    var request = {
      location: pyrmont,
      radius: 50000,
      types: [op[si].text]

    };

    //Create an info window that 
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);   


  }





  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      countplaces(results);  
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function countplaces(placecount){
      var nplaces = placecount.length;
      document.getElementById('nplaceholder').innerHTML = nplaces + '&nbsp;Beauty Salons in Maryland';
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: placeLoc
    });

    google.maps.event.addListener(marker, 'click', function() {
      var placedata = place.rating + "<br>";
      placedata = placedata + place.name + "<br>";
      placedata = placedata + place.formatted_phone_number+ "<br>";
      placedata = placedata + place.formatted_address+ "<br>";
      infowindow.setContent(placedata);
      infowindow.open(map, this);
    });
  }

google.maps.event.addDomListener(window, 'load', initialize);


function start() {
    populateselect();
    initialize();
    setlocationtype();

}
window.onload = start;
4

1 回答 1

0

我认为这个链接会有所帮助。这将 Fusion Tables API 与 Maps API https://developers.google.com/fusiontables/docs/samples/change_query结合使用

如果您使用融合表,我几乎可以肯定您将拥有完成项目所需的所有工具。所有源代码都在下面的链接中,为您实现了 3 和 4。

https://developers.google.com/fusiontables/docs/sample_code#FTLayers

于 2012-06-25T06:00:55.080 回答