表格选择更改引脚到谷歌地图答案

【问题标题】：Form Select change pin into Google Map表格选择更改引脚到谷歌地图
【发布时间】：2017-03-21 00:20:32
【问题描述】：

我将此代码用于谷歌地图，此示例中的地图显示 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));
    }
}

加载地图后，我只需要在表单中使用选择输入显示两个 Pin：

<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 只是可选的，我不知道是否真的有必要。

最好的方法是什么？

【问题讨论】：

为什么你有两个选择？ only two of the Pins 是什么意思？您想限制所选引脚的最大数量吗？在这种情况下，您需要在表单之间进行一些引用。我认为您应该选择允许多项选择的单选，请参阅stackoverflow.com/questions/4135210/html-multiselect-limit
有这方面的消息吗？

标签： javascript jquery google-maps

【解决方案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.

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

【讨论】：