Google 地图 API - 显示来自 select 的标记

Question

我在站点 (www.maclife.pl/pl/kontakt) 上有 Google 个地图，其中有 4 个标记。我不知道如何在更改 select 选项时在标记之间移动地图（例如第一个标记...）

    var map;
    function initialize(){
        var mapOptions = {
            scrollwheel: false,
            zoom: 15,
            center: new google.maps.LatLng(52.2081935, 21.0220677)
        };
        map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);

        var markers = [
            ['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, ''],
            ['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, ''],
            ['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, ''],
            ['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '']
        ];

        for (var i = 0; i < markers.length; i++){
            marker=addMarker(i);
        }

        google.maps.event.trigger(addMarker(2) ,'click');

        function addMarker(i){
            var draftMarker = markers[i];
            var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: draftMarker[0]
            });

            google.maps.event.addListener(marker, 'click', function(){
                info.setContent(draftMarker[3]);
                info.open(map,marker);
            });
            return marker;
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

创建一个数组来保存对全局范围内 google.maps.Marker 对象的引用：

var gmarkers = [];

在创建标记时将标记推入该数组：

function addMarker(i) {
    var draftMarker = markers[i];
    var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: draftMarker[0]
    });
    google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);
    return marker;
}

如果您想要侧边栏或下拉菜单，请在创建标记时动态创建：

function addMarker(i) {
    var draftMarker = markers[i];
    var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: draftMarker[0]
    });
    google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);
    side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
    return marker;
}

working fiddle

代码片段：

var map;
var info = new google.maps.InfoWindow();
var gmarkers = [];
var side_bar_html = "";

function initialize() {
    var mapOptions = {
      scrollwheel: false,
      zoom: 15,
      center: new google.maps.LatLng(52.2081935, 21.0220677)
    };
    map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);

    var markers = [
      ['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, '0'],
      ['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, '1'],
      ['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, '2'],
      ['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '3']
    ];

    for (var i = 0; i < markers.length; i++) {
      marker = addMarker(i);
    }

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>" + side_bar_html + "</select>";

    google.maps.event.trigger(gmarkers[2], 'click');
    map.setCenter(gmarkers[2].getPosition());

    function addMarker(i) {
      var draftMarker = markers[i];
      var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: draftMarker[0]
      });

      google.maps.event.addListener(marker, 'click', function() {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
      });
      gmarkers.push(marker);
      side_bar_html += '<option value=' + (gmarkers.length - 1) + '>' + draftMarker[0] + '<\/option>';

      return marker;
    }
  }
  // This function picks up the click and opens the corresponding info window

function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#google-maps {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="google-maps" style="border: 2px solid #3872ac;"></div>
<div id="side_bar"></div>

Google 地图 API - 显示来自 select 的标记

Google Maps API - show marker from select

html

javascript

google-maps-api-3

google-maps-markers