使用 google maps api(使用新的“Places Library”)我正在尝试:
- 显示具有特定经度和纬度的 map 。成功完成
- 显示一个下拉列表，其中包含 Google 可以搜索的所有可用商店类型。成功完成
- 检测下拉选择何时更改并更改 setlocationtype() 函数中的“类型”值。
- 因此， map 应根据下拉列表选择显示所有可用的位置类型(即邮局、加油站等)。
被这个难住了。我希望我没有转储太多代码。我认为我应该尽可能彻底地解释所有内容以获得正确的结果。
提前致谢
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 + ' 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;
最佳答案
我认为此链接会有所帮助。这将 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
关于javascript - 如何使用下拉菜单中的地点库在 Google map 上显示标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11183974/