使用下拉菜单在谷歌地图上切换位置

Question

我是谷歌地图的新手，我有一个地图有多个标记，我想使用下拉菜单在它们之间切换。

我使用下面的代码填充下拉菜单与标记的标题:

// select a marker from dropdown menu
$("select#mySelect").change(function(){ 
      gotoMarker($(this).val()); 
});
function makeMarkerList() {
        var options = "";
        $("select#mySelect").empty();
        for (var i in markers) {
            options += "<option value='" + i + "'>" + markers[i].map.title + "</option>";
        }
        $("select#mySelect").html(options);
}

这是目前为止我写的jsfiddle

这显示了地图上方的下拉菜单，但是我不知道如何在下拉菜单中获得标记标题。

我很感激你的帮助。

谢谢。

Answer 1

关于您的第二个问题:您的原始代码，如下所示，试图将下拉列表中选定项的值传递给panTo()方法。然而，由于您设置的方式，该值只是markers数组中标记的索引，而不是LatLng对象。将该索引传递给panTo()方法将生成一个错误。

$("select#mySelect").change(function(){ 
      //gotoMarker($(this).val());
    map.panTo($(this).val().getPosition());
});

要解决这个问题，获取索引，然后使用相应的标记从你的markers数组:

$("select#mySelect").change(function(){ 
    var index = $(this).val();
    map.panTo(markers[index].position);
});