Question

我正在使用此代码进行谷歌地图，此示例中的地图显示3个引脚，并且工作正常。

<script>
function loadGmapAPI()
{
    var script = document.createElement("script");
    script.src = "https://maps.googleapis.com/maps/api/js?key=[[API HERE]]&callback=initMap";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function initMap() {
    var pinone = {
        info: '<p>html here</p>`]]',
        lat: 10.000,
        long: -10.000
    };
    var pintwo = {
        info: '<p>html here</p>`]]',
        lat: 20.000,
        long: -20.000
    };
    var pinthree = {
        info: '<p>html here</p>`]]',
        lat: 30.000,
        long: -30.000
    };
    var locations = [
        [pinone.info, 10.000.lat, -10.000.long],
        [pintwo.info, 20.000.lat, -20.000.long],
        [pinthree.info, 30.000.lat, -30.000.long],
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: new google.maps.LatLng(5.000,-5.000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, i;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                smoothScroll();
            }
        })(marker, i));
    }
}

加载地图后，我只需要使用表格中的选择输入显示两个引脚：

<form id="form">

    <select id="selectFrom">
        <option value=""></option>
        <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option>
        <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option>
        <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option>
    <select>

    <select id="selectTo">
        <option value=""></option>
        <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option>
        <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option>
        <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option>
    <select>

</form>

data-lat和data-long只是可选的我不知道是否真的有必要。

最好的方法是什么？

Answer 1

尝试以下步骤：

将您的标记'visible属性设置为false，以便它们开始隐藏：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    visible: false // <- add this
});

将您的标记添加到数组中，以供进一步参考：

<script>
var markers = []; // <- add this at the beggining or anywhere outside any scope
...
var marker = new google.maps.Marker({ ... });

markers.push(marker);

将markers作为全局变量（在文档中的任何函数之外声明它）。

向select元素添加更改事件：

$("#form").on("change", "select", function() {
    var indexFrom = $('#selectFrom').get(0).selectedIndex - 1,
        indexTo = $('#selectTo').get(0).selectedIndex - 1;

    // Hide all
    markers.forEach(x => x.setVisible(false));

    // Show marker 'From'
    if (indexFrom >= -1) {
        markers[indexFrom].setVisible(true);
    }

    // Show marker 'To'
    if (indexTo >= -1) {
        markers[indexTo].setVisible(true);
    }
});

setVisible() in Map's API docs

我无法测试它，从我的头顶做了。如果您有任何问题，请告诉我。

表格选择更改图钉进入谷歌地图

1 个答案: