从外部链接

Question

这是我的示例代码。我想在点击链接时打开信息框。

example jsfiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var loc, map, marker, infobox;

  loc = new google.maps.LatLng(-33.890542, 151.274856);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
  });

  infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });

  google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

.infobox-wrapper {
  display: none;
}
#infobox {
  border: 2px solid black;
  margin-top: 8px;
  background: #333;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: .5em 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 -1px #000000;
  -webkit-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
}

＆＃13;

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

<a href="">Open Infobox</a>

<div class="infobox-wrapper">
  <div id="infobox">
    The contents of your info box. It's very easy to create and customize.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种选择是触发标记上的点击事件。要做到这一点（在HTML点击事件中使用它），标记需要在全局范围内（在任何函数定义之外）

另一种选择是在DOM对象上使用google.maps.event.addDomListener，但它必须有一个id或某种方式来获取它的引用。

var marker; // in global scope
function initialize() {
  // these are local to the initialize function
  var loc, map, infobox;

  loc = new google.maps.LatLng(-33.890542, 151.274856);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
  });

  infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });

  google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

.infobox-wrapper {
  display: none;
}
#infobox {
  border: 2px solid black;
  margin-top: 8px;
  background: #333;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: .5em 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 -1px #000000;
  -webkit-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
}

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

<!-- trigger the marker click event -->
<a href="javascript:google.maps.event.trigger(marker,'click'); ">Open Infobox</a> 

<div class="infobox-wrapper">
  <div id="infobox">
    The contents of your info box. It's very easy to create and customize.
  </div>
</div>