javascript - Google Map 标记悬停/单击上的样式侧边栏条目

Question

我正在使用谷歌地图创建一种商店定位器应用程序，在完成之前还需要做一件事......当相应的标记悬停并选择时，我需要我的侧边栏条目来更改背景颜色。

在过去的两天里，我一直在 SO 上查看很多类似的问题，但我不知道如何将解决方案附加到我自己的项目中。这是我的代码（以及我试图改造的注释掉的行）：

// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
//var leafmerchant = document.getElementsByAttribute("merchant_listing");
//var leafer = document.getElementByTagName("merchant_listing");
var street = "";
var city = "";
var state = "";
var zip = "";
var phone = "";

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
//var iterator = 0;
var map = null;

function initialize() {
  // create the map
  // HYBRID This map type displays a transparent layer of major streets on satellite images.
  // ROADMAP This map type displays a normal street map.
  // SATELLITE This map type displays satellite images.
  // TERRAIN This map type displays maps with physical features such as terrain + vegetation.
  var myOptions = {
    center: new google.maps.LatLng(42.366896, -71.080135),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    zoom: 16,

    mapTypeControl: true, mapTypeControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },

    panControl: true, panControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
    },

    streetViewControl: true, streetViewControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
    },

    zoomControl: true, zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT,
      style: google.maps.ZoomControlStyle.SMALL
    },

    scaleControl: false, scaleControlOptions: {
      position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
  };

  map = new google.maps.Map(document.getElementById("merchant-map"), myOptions);

  google.maps.event.addListener(map, 'click', function() { infowindow.close(); });

  // Add markers to the map // Set up markers with info windows // add the points
  var point = new google.maps.LatLng(42.366896, -71.080135);
  var marker = createMarker(point, "Leaf HQ", "Some stuff to display in the<br/>First Info Window", "222 Third Street", "Cambridge", "MA", "02142", "617-890-1234")

  var point = new google.maps.LatLng(42.363341, -71.079523);
  var marker = createMarker(point, "Casa B", "Some stuff to display in the<br/>First Info Window", "253 Washington Street", "Somerville", "MA", "02143", "617-764-2180")

  var point = new google.maps.LatLng(42.368996, -71.085831);
  var marker = createMarker(point, "Sepal", "Some stuff to display in the<br/>Third Info Window", "84 Massachusetts Avenue", "Cambridge", "MA", "02139", "617-324-5568")

  var point = new google.maps.LatLng(42.367111, -71.076822);
  var marker = createMarker(point, "Café Luna", "Some stuff to display in the<br/>Fourth Info Window", "403 Massachusetts Avenue", "Cambridge", "MA", "02139", "617-576-3400")

  var point = new google.maps.LatLng(42.367997, -71.081146);
  var marker = createMarker(point, "Leaf HQ", "Some stuff to display in the<br/>First Info Window", "222 Third Street", "Cambridge", "MA", "02142", "617-890-1234")

  var point = new google.maps.LatLng(42.364442, -71.078504);
  var marker = createMarker(point, "Casa B", "Some stuff to display in the<br/>First Info Window", "253 Washington Street", "Somerville", "MA", "02143", "617-764-2180")

  var point = new google.maps.LatLng(42.340097, -71.084842);
  var marker = createMarker(point, "Sepal", "Some stuff to display in the<br/>Third Info Window", "84 Massachusetts Avenue", "Cambridge", "MA", "02139", "617-324-5568")

  var point = new google.maps.LatLng(42.368212, -71.075803);
  var marker = createMarker(point, "Café Luna", "Some stuff to display in the<br/>Fourth Info Window", "403 Massachusetts Avenue", "Cambridge", "MA", "02139", "617-576-3400")

  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("merchant_list").innerHTML = side_bar_html;
}

var infowindow = new google.maps.InfoWindow ({ size: new google.maps.Size(150, 50) });

// This function picks up the click and opens the corresponding info window
function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); }

// A function to create the marker and set up the event window function
function createMarker (latlng, name, html, street, city, state, zip, phone) {
  //var contentString = html;
  var contentString = '<div id="content">' +
    '<span class="title">' + name + '<\/span>' +
    '<div class="infomap-address">' +
    '<div class="address-01">' + street + '<\/div>' +
    '<div class="address-02">' + city + ',&nbsp;' + state + '&nbsp;' + zip + '<\/div>' +
    '</div>' +
    '<div class="infomap-address">Get directions' +
    '<\/div>'
    '<\/div>';
  var marker = new google.maps.Marker ({
    //icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
    map: map,
    position: latlng,
    zIndex: Math.round(latlng.lat()*-100000)<<5,
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

  //google.maps.event.addListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; });
  //google.maps.event.addListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; });

  //google.maps.event.addListener(leafmerchant, 'mouseover', function() { leafmerchant.style.backgroundColor = '#eee'; });
  //google.maps.event.addListener(leafmerchant, 'mouseout', function() { leafmerchant.style.backgroundColor = '#fff'; });

  // save the info we need to use later for the side_bar // add a line to the side_bar html
  gmarkers.push(marker); side_bar_html += '<li class="merchant_listing vcard">'
  + '<a class="url fn org" href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br/>'
  + '<div class="adr">'
  + '<div class="street-address">' + street + '<\/div>'
  + '<span class="locality">' + city + ',&nbsp;<\/span>'
  + '<span class="region">' + state + '&nbsp;<\/span>'
  + '<span class="postal-code">' + zip + '<br/><\/span>'
  + '<a class="tel">' + phone + '<\/a>'
  + '<\/div>'
  + '<\/li>';

  marker.setAnimation(google.maps.Animation.DROP);
  //function drop(){ for (i =0; i < gmarkers.length; i++) { setTimeout(function() { addMarkerMethod();}, i * 200); }}

  //google.maps.event.addListener(marker, 'mouseover', function() { document.getElementByTagName(merchant_listing).style.backgroundColor = '#07d0eb'; });
  //google.maps.event.addListener(marker, 'mouseout', function() { document.getElementByTagName(merchant_listing).style.backgroundColor = '#191919'; });

  //google.maps.event.addListener(gmarkers, 'mouseover', function() { leafer.style.backgroundColor = '#eee'; });
  //google.maps.event.addListener(gmarkers, 'mouseout', function() { leafer.style.backgroundColor = '#fff'; });
}