Google Map通过外部链接点击标记 [英] Google Map click marker by external link

问题描述

Google地图，点击外部链接目标标记。在下面找到小提琴演示。

Google map, on click external link target marker. Find fiddle demo below.

寻找小提琴演示 a>

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>

推荐答案

我得到javascript错误：未捕获的ReferenceError：triggerClick未在您的小提琴中定义。 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>

这篇关于Google Map通过外部链接点击标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！