Google 地图 API - 显示选择的标记

Question

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

    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

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

   var gmarkers = [];

2. 创建标记时将其推到该数组上：

    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;
    }
   

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

   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;
   }
   

工作小提琴

代码片段：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="google-maps" style="border: 2px solid #3872ac;"></div>
<div id="side_bar"></div>