1

有什么方法可以使用下拉菜单，而不是用于 Maps API 的商店定位器库示例中的复选框。该复选框是一个“storeLocator.Feature”项目。

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

我对 Javascript 编码非常陌生，但在 CSS、HTML 和其他计算机语言方面经验丰富。我已经非常密切地遵循链接中的示例，因此您可以假设我自己的代码看起来相同。——</p>

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

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

谢谢。

4

2 回答 2

3

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

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

  2. 创建一个变量来存储所有功能以供以后使用：

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

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

  3. 创建select-元素

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

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

    功能（）{
view.set('featureFilter',
        新的 storeLocator.FeatureSet(features[this.selectedIndex]));
        view.refreshView();}

    （第 2 步中创建的数组在哪里view）storeLocator.Viewfeatures

    5.将select放到文档内所需的位置

于 2013-01-28T01:44:24.190 回答
0

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

Molle 博士在 JS fiddle 中的解决方案非常好，但是我刚刚注意到地图的“方向”功能不再起作用。这很容易纠正吗？谢谢

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

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

这可能对某人有用

于 2015-02-13T15:46:21.833 回答