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

Dropdown Menu using the 'storeLocator.Feature' in the Store Locator Library for Maps API

本文关键字：storeLocator Feature 下拉菜单 定位器 地图 API      更新时间：2023-09-26

有没有办法使用下拉菜单，而不是地图 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;
};

谢谢。

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

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

  2. 创建一个变量，用于存储所有要素以供以后使用： 

    var features=view.getFeatures（）.asList（）;

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

  3. 创建select

    4. 元素

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

  5. 使用以下回调将更改处理程序添加到 SELECT：

    函数（）{view.set（'featureFilter'，        new storeLocator.FeatureSet（features[this.selectedIndex]））;        view.refreshView（）;}

    （其中view是storeLocator.View，features步骤#2中创建的数组）

    5.将选择放在文档中的所需位置

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

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

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

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

这可能对某人有用

相关文章：