Question

有没有办法使用下拉菜单，而不是Store Locator Library for Maps API示例中使用的复选框。该复选框是'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;
};

感谢。

Answer 1

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

将面板的featureFilter - 选项设置为false （这将阻止库创建复选框）
创建一个变量，您可以在其中存储所有功能以供日后使用：
```
var features=view.getFeatures().asList();
```
这会返回一个包含所有功能的数组
创建select - 元素
使用所需的select - 元素填充option - 元素
迭代上面创建的features - 数组，并为option的每个项添加select。通过调用项目的option - 方法显示在getDisplayName()内的文本。
使用以下回调向select添加更改处理程序：
```
function(){
view.set('featureFilter', 
        new storeLocator.FeatureSet(features[this.selectedIndex]));
        view.refreshView();}
```
（其中view是步骤＃2中创建的数组storeLocator.View和features

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

Answer 2

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

Molle博士在JS小提琴中的解决方案非常出色，但我刚刚注意到地图的“方向”功能不再适用。这可以轻松纠正吗？感谢

编辑：比我想象的更容易。在小提琴“featureFilter：”中设置为'false'。需要在代码中出现带有class =“feature-filter”的div才能显示方向，将值设置为“true”会显示div（和复选框）以便方向起作用。复选框隐藏在样式表中..

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

这可能对某人有用

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

2 个答案: