外部链接的谷歌地图点击标记[关闭]

Question

我有一些锚按钮，例如。 location1、location2 等。我想在单击它们各自的按钮时突出显示位置详细信息。 例如。 location1 应在谷歌地图上突出显示 location1。

find fiddle demo

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          map.setZoom(9);
          map.setCenter(marker.getPosition());  
        }
      })(marker, i));

function triggerClick(i) {
    google.maps.event.trigger(markers[i],'click');
}

<ul class="nav">
<li><a href="javascript:triggerClick(0)">location1</a></li>
<li><a href="javascript:triggerClick(1)">location2</a></li>
<li><a href="javascript:triggerClick(2)">location3</a></li>
<li><a href="javascript:triggerClick(3)">location4</a></li>
</ul>

Answer 1

我得到了 javascript 错误：Uncaught ReferenceError: triggerClick is not defined 在你的小提琴中。 triggerClick 函数是 onLoad 函数的本地函数，它需要是全局的才能在 HTML 点击函数中使用。

updated fiddle

代码sn-p：

var markers = new Array();
var map;

var locations = [
  ['<h4>Delhi International Art Festival, New Delhi</h4>', 28.613939, 77.209021],
  ['<h4>ICCR - Horizon Series, New Delhi</h4>', 28.625439, 77.245715],
  ['<h4>Shree Arobindo Asharam, Pondecherry</h4>', 11.936761, 79.834314],
  ['<h4>With Shuba Mudgal, Florance, Italy</h4>', 43.769560, 11.255814],
  ['<h4>Classical Piano by S.A.I.D., London, UK</h4>', 51.507351, -0.127758],
  ['<h4>Piano Unplugged for Nartan Academy, US & Canada</h4>', 40.712784, -74.005941]
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'purple-dot.png',
  iconURLPrefix + 'green-dot.png'
]
var iconsLength = icons.length;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    }
  });


  var infowindow = new google.maps.InfoWindow({
    maxWidth: 160
  });

  var iconCounter = 0;

  // Add the markers and infowindows to the map
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icons[iconCounter],
      title: 'Click to zoom'
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        //map.setZoom(9);
        //map.setCenter(marker.getPosition());	
      }
    })(marker, i));

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        map.setZoom(9);
        map.setCenter(marker.getPosition());
      }
    })(marker, i));


    iconCounter++;
    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if (iconCounter >= iconsLength) {
      iconCounter = 0;
    }

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

function triggerClick(i) {
  google.maps.event.trigger(markers[i], 'click');
  //map.getBounds();	
}




function autoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].position);
  }
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}

body {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.archive-map {
  width: 100%;
  height: 400px;
}

.nav {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: center;
  margin: 0;
  padding-left: 0;
}

.nav li {
  display: inline-block;
}

.nav li a {
  color: #fff;
  padding: 10px;
  display: block;
  position: relative;
  z-index: 100;
}

<script src="https://maps.google.com/maps/api/js"></script>
<ul class="nav">
  <li><a href="javascript:triggerClick(0)">location1</a>

  </li>
  <li><a href="javascript:triggerClick(1)">location2</a>

  </li>
  <li><a href="javascript:triggerClick(2)">location3</a>

  </li>
  <li><a href="javascript:triggerClick(3)">location4</a>

  </li>
</ul>
<div class="container">
  <div id="map" class="archive-map"></div>
</div>