如何使用下拉菜单中的地点库在Google地图上显示标记?

时间:2012-06-25 05:41:25

标签: javascript html5 google-maps google-maps-api-3

使用谷歌地图api(使用新的“地方图书馆”)我试图:

  1. 显示具有特定经度和纬度的地图。已成功完成
  2. 显示Google可以搜索的所有商店类型的下拉列表。已成功完成
  3. 检测下拉选项何时更改并更改setlocationtype()函数中的“types”值。
  4. 因此,地图应根据下拉列表选择显示所有可用的位置类型(即邮局,加油站等)。
  5. 难倒了。我希望我没有转储过多的代码。我想我应该尽可能彻底地解释一切,以获得正确的结果。

    提前致谢

      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;
    

1 个答案:

答案 0 :(得分: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