javascript - 使用 Store Locator Library for Maps API 中的 'storeLocator.Feature' 的下拉菜单

Question

有没有办法使用下拉菜单，而不是Store Locator Library for Maps API 示例中使用的复选框？ .复选框是“storeLocator.Feature”项。

基本上，我希望用户能够从下拉列表中选择一个项目，这会立即更改 map 上的标记。

我对 Javascript 编码还很陌生，但在 CSS、HTML 和其他计算机语言方面经验丰富。我非常仔细地遵循了链接中的示例，因此您可以假设我自己的代码看起来是一样的。 –

这是我认为我必须编辑的代码部分:

DataSource.prototype.parse_ = function(csv) {
var stores = [];
var rows = csv.split('\n');
var headings = this.parseRow_(rows[0]);

for (var i = 1, row; row = rows[i]; i++) {
row = this.toObject_(headings, this.parseRow_(row));
var features = new storeLocator.FeatureSet;  
features.add(this.FEATURES_.getById('Cafe-' + row.Cafe));
    features.add(this.FEATURES_.getById('Wheelchair-' + row.Wheelchair));
    features.add(this.FEATURES_.getById('Audio-' + row.Audio));

var position = new google.maps.LatLng(row.Ycoord, row.Xcoord);

var shop = this.join_([row.Shp_num_an, row.Shp_centre], ', ');
var locality = this.join_([row.Locality, row.Postcode], ', ');

var store = new storeLocator.Store(row.uuid, position, features, {
  title: row.Fcilty_nam,
  address: this.join_([shop, row.Street_add, locality], '<br>'),
  hours: row.Hrs_of_bus
});
stores.push(store);
}
return stores;
};

谢谢。

Answer 1

您需要按照以下步骤操作:

1. 将面板的 featureFilter 选项设置为 false (这将阻止库创建复选框)

2. 创建一个变量，用于存储所有特征供以后使用:

   var features=view.getFeatures().asList();

   这将返回一个包含所有特征的数组

3. 创建select元素

4. 用所需的option元素填充select元素
   遍历上面创建的 features 数组，并将每个项目的 option 附加到 select 。 通过调用项目的 getDisplayName() 方法获取的要在 option 内显示的文本。

5. 使用以下回调向选择添加更改处理程序:

   function(){
   view.set('featureFilter', 
           new storeLocator.FeatureSet(features[this.selectedIndex]));
           view.refreshView();}

   (其中 view 是 storeLocator.View 和 features 在步骤#2 中创建的数组)

   <强>5。将选择放在文档中的所需位置