Sidebar按钮和infoWindow有可能有不同的内容吗？

Question

我的侧边栏按钮和我的infoWindow是否可以使用不同的字符串但是引用相同的位置？

以下是我的代码示例

< script src = "https://maps.googleapis.com/maps/api/js?KEY=AIzaSyCo0yGy0Qk9b1x4pFDnk_rMQibhBroLW8M" > < /script>

  <script>
    var restaurantList = [{
      'latlng': [6.428073, 3.421507],
      name: 'RSVP'
    }, {
      'latlng': [6.426412, 3.414347],
      name: 'Izanagi'
    }, {
      'latlng': [6.433162, 3.423306],
      name: 'Bistro 7'
    }, {
      'latlng': [6.429500, 3.420479],
      name: 'Spice Route'
    }, {
      'latlng': [6.428518, 3.428305],
      name: '355'
    }, ];

    var infoWnd, mapCanvas;

    function intialize() {
      
mapCanvas = new google.maps.Map(document.getElementById('map_canvas'), {
  disableDefaultUI: true,
  scrollwheel: false,
  draggable: true,
  zoom: 14,
  center: new google.maps.LatLng(6.456528, 3.408272),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
infoWnd = new google.maps.InfoWindow();

var bounds = new google.maps.LatLngBounds();
var restaurant, i, latlng;
for (i in restaurantList) {
  
  restaurant = restaurantList[i];
  latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]);

  bounds.extend(latlng);
  var marker = createMarker(
    mapCanvas, latlng, restaurant.name
  );

  createMarkerButton(marker);
}

mapCanvas.fitBounds(bounds);
}

var iconBase = 'http://maps.google.com/mapfiles/kml/pal2/';


function createMarker(map, latlng, title) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: iconBase + 'icon44.png',
    title: title
  });

  google.maps.event.addListener(marker, "click", function() {
    infoWnd.setContent("<strong>" + title + "</title>");
    infoWnd.open(map, marker);
  });
 
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(17);
    map.setCenter(marker.getPosition());
  });
  return marker;
}

function createMarkerButton(marker) {

  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  li.innerHTML = title;
  ul.appendChild(li);

  google.maps.event.addDomListener(li, "click", function() {
    google.maps.event.trigger(marker, "click");
  });
}


google.maps.event.addDomListener(window, "load", intialize); < /script>

在我的代码中，当您单击侧栏上的餐馆名称时，它会平移到地图上的位置并弹出信息窗口。现在，我希望侧边栏包含不同的文本。这可能吗？

Answer 1

使侧边栏单击打开infowindow而不是“点击”标记。

变化：

function createMarkerButton(marker) {

  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  li.innerHTML = title;
  ul.appendChild(li);

  google.maps.event.addDomListener(li, "click", function() {
    google.maps.event.trigger(marker, "click");
  });
}

要：

function createMarkerButton(marker, map, sbTitle, sbContent) {

  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  li.innerHTML = title;
  ul.appendChild(li);

  google.maps.event.addDomListener(li, "click", function() {
    infoWnd.setContent("<strong>" + sbTitle + "</title><br>" + sbContent);
    infoWnd.open(map, marker);
  });
}

working fiddle

代码段：

    var restaurantList = [{
      'latlng': [6.428073, 3.421507],
      name: 'RSVP',
      description: 'description #1'

    }, {
      'latlng': [6.426412, 3.414347],
      name: 'Izanagi',
      description: 'description #2'
    }, {
      'latlng': [6.433162, 3.423306],
      name: 'Bistro 7',
      description: 'description #3'
    }, {
      'latlng': [6.429500, 3.420479],
      name: 'Spice Route',
      description: 'description #4'
    }, {
      'latlng': [6.428518, 3.428305],
      name: '355',
      description: 'description #5'
    }];

    var infoWnd, mapCanvas;

    function intialize() {

      mapCanvas = new google.maps.Map(document.getElementById('map_canvas'), {
        disableDefaultUI: true,
        scrollwheel: false,
        draggable: true,
        zoom: 14,
        center: new google.maps.LatLng(6.456528, 3.408272),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      infoWnd = new google.maps.InfoWindow();

      var bounds = new google.maps.LatLngBounds();
      var restaurant, i, latlng;
      for (i in restaurantList) {

        restaurant = restaurantList[i];
        latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]);

        bounds.extend(latlng);
        var marker = createMarker(
          mapCanvas, latlng, restaurant.name);

        createMarkerButton(marker, mapCanvas, "sidebar:" + restaurant.name, restaurant.description);
      }

      mapCanvas.fitBounds(bounds);
    }

    var iconBase = 'http://maps.google.com/mapfiles/kml/pal2/';


    function createMarker(map, latlng, title) {
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: iconBase + 'icon44.png',
        title: title
      });

      google.maps.event.addListener(marker, "click", function() {
        infoWnd.setContent("<strong>" + title + "</title>");
        infoWnd.open(map, marker);
      });

      google.maps.event.addListener(marker, 'click', function() {
        map.setZoom(17);
        map.setCenter(marker.getPosition());
      });
      return marker;
    }

    function createMarkerButton(marker, map, sbTitle, sbContent) {

      var ul = document.getElementById("marker_list");
      var li = document.createElement("li");
      var title = marker.getTitle();
      li.innerHTML = title;
      ul.appendChild(li);

      google.maps.event.addDomListener(li, "click", function() {
        infoWnd.setContent("<strong>" + sbTitle + "</title><br>" + sbContent);
        infoWnd.open(map, marker);
      });
    }


    google.maps.event.addDomListener(window, "load", intialize);

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map_canvas {
  width: 100%;
  height: 50%;
}
#marker_list {
  width: 100%;
  height: 50%;
}

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