-1

これは私のコード例です。リンクがクリックされたときにインフォボックスを開きたい。

例jsfiddle

コードスニペット：

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);
.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>

<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>

4

1 に答える 1

1

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>

于 2015-07-09T14:01:32.927 に答える