问题描述

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

I have some anchor buttons eg. location1, location2, etc. I want to highlight the location details on click of their respective buttons. Eg. location1 should highlight location1 on google map.

查找小提琴演示

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>

推荐答案

我得到了 javascript 错误:Uncaught ReferenceError: triggerClick is not defined in your fiddle.triggerClick 函数是 onLoad 函数的本地函数，它需要是全局的才能在 HTML 点击函数中使用.

I get the javascript error: Uncaught ReferenceError: triggerClick is not defined in your fiddle. the triggerClick function is local to the onLoad function, it needs to be global to be used in an HTML click function.

更新小提琴

代码片段:

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>

这篇关于谷歌地图点击标记通过外部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！