JS下拉菜单

Question

执行此下拉菜单的最快方法是什么（＆＃34;选择城市＆＃34;，以结果为中心的Google地图）？

我真的需要通过一些论坛和示例轻松一下，但问题是，我今天的截止日期很紧。

我对js / css没有多少经验。我需要获取引导主题和样式下拉菜单等，还是可以使用我自己的js / css创建它？

谢谢！

（再次，对于没有经过多少研究的问题感到抱歉，这是一个例外，对我来说不是一个规则。）

Answer 1

此SO问题提供了一种解决方案，可以将谷歌地图置于任意纬度和经度中心

How to center a Google Map to a latitude and longitude location?

对于列表中的每个城市，您需要查找纬度和经度，并将它们存储在JavaScript对象中，甚至存储在DOM中，并附带各自的选项。

<select>
     <option data-lat="<latitude>" data-long="<longitude>">Location 1</option>
     <option data-lat="<latitude>" data-long="<longitude>">Location 2</option>
     <option data-lat="<latitude>" data-long="<longitude>">Location 3</option>
</select>

然后在选择框中添加一个事件处理程序，以便进行更改，从选择框中获取当前选定值，获取该城市的纬度和经度，但是您选择存储它并将这些值插入到代码段中来自参考SO问题

var locationSelectorHandler = function(e){
    var location = this.value;
    var lat = this.dataset.lat;
    var long = this.dataset.long;
    // From SO Question        
    document.getElementById("<map-id>").setCenter(new google.maps.LatLng(lat, long)); 
};

locationSelector.addEventListener("change", locationSelectorHandler);

Answer 2

我会使用HTML的select和option标记。

然后创建一些像这样的CSS样式。

select, option {
    width: 200px;
    color: blue;
    margin-bottom: 15px;
    font-size: 1em;
}

<select>
    <option selected>Vilnius</option>
    <option>Kaunus</option>
    <option>Klaipeda</option>
    <option>Siauliali</option>
    <option>Panavezyz</option>
</select>