Javascript 使用地图API存储定位器库中的“storeLocator.Feature”的下拉菜单

是否有任何方法可以使用下拉菜单，而不是在示例中使用的复选框。该复选框是“storeLocator.Feature”项

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

我对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;
};

---

谢谢。

您需要遵循以下步骤：

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

创建一个变量，用于存储所有功能以供以后使用：

其中view是storeLocator。查看并显示步骤2中创建的数组

五,。将“选择”按钮放在文档中所需的位置

---

希望我可以在这里发表评论，因为我发现这个问题对我实现商店定位器非常有用

Molle博士在JS fiddle中的解决方案非常出色，但我刚刚注意到地图的“方向”功能不再有效。这是否容易纠正？谢谢

编辑：比我想象的容易。在fiddle featureFilter中：设置为“false”。代码中需要存在class=feature过滤器的div才能显示方向，将值设置为“true”将显示div和复选框，以便方向正常工作。样式表中隐藏了复选框

.storelocator-panel .feature-filter {
/*overflow: hidden;*/ display:none
}

---

这可能对某些人有用

谢谢Molle博士。你必须容忍我，因为我对Javascript相当陌生。我发现这个文本是一个示例select元素。新闻站长：我要在上面的somwhere中的功能上插入一个迭代吗？等一下，我将设置一个示例fiddle。JavaScript面板包含一些注释的相关代码，其余代码取自。fiddle的JavaScript面板的内容取代了原始演示的内容。@Dr.Molle伟大的答案！只有一个问题-我们如何处理在选择列表中添加无功能选项的问题。表示未选择任何功能的空白初始选项？这将取决于使用的数据源。 function(){ view.set('featureFilter', new storeLocator.FeatureSet(features[this.selectedIndex])); view.refreshView();}

.storelocator-panel .feature-filter {
/*overflow: hidden;*/ display:none
}