Question

我正在使用Google Maps API中的信息框插件来为地点创建自定义的信息框，但它仅适用于第一个（名称为“ west”的信息框）。

当我使用不同的坐标和名称为其复制代码时，单击标记不会打开代码。

代码如下：

function initMap() {
  var west = {
    lat: 39.288682,
    lng:  -74.565635
  };

   var firststreetbeach = {
    lat: 39.2807806,
    lng: -74.5575138
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: west,
    mapTypeId: google.maps.MapTypeId.HYBRID,
  styles: [
 { featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }]}]

 });

  var marker = new google.maps.Marker({
    map: map,
    draggable: false,
    position: west,
    visible: true
  });
marker.setTitle("west");


  var firststreetbeachMARKER = new google.maps.Marker({
    position: firststreetbeach,
    map: map
  });
  firststreetbeachMARKER.setTitle("First Street Beach");

var boxText = document.createElement("div");
  boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
  boxText.innerHTML =
    `<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`

 var firststreetbeachBOX = document.createElement("div");
  firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
  firststreetbeachBOX.innerHTML =
    `<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-120, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.90,
      width: "235px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  google.maps.event.addListener(marker, "click", function(e) {
    ib.open(map, this);
  });
  var ib = new InfoBox(myOptions);
  ib.open(map, this);
  map.panTo(ib.getPosition())



   var myOptionsa = {
    content: firststreetbeachBOX,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-120, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.90,
      width: "235px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
    ib.open(map, this);
  });
  var id = new InfoBox(myOptionsa);
  id.open(map, this);
  map.panTo(id.getPosition())

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

JSFIDDLE：https://jsfiddle.net/kaidemarco/06wpx75j/228/

Answer 1

我在您的小提琴上收到一个JavaScript错误：Uncaught TypeError: anchor.getPosition is not a function。您的代码中有很多错别字：

firststreetbeachBOX是InfoBox，而不是google.maps.Marker。那应该是firststreetbeachMARKER。

google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
  ib.open(map, this);
});

应为：

google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
  ib.open(map, this);
});

当前只有一个InfoBox参考ib。如果您只希望打开一次点击，那很好，但是如果您想要正确的内容，则需要重置onclick函数中的选项：

google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
  ib.open(map, this);
});

应为：

google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
  ib.setOptions(myOptionsa);
  ib.open(map, this);
});

在onclick函数外部的ib.open(map, this)调用中，this不是有效的anchor。那应该是合适的google.maps.Marker对象：

// the first should be:
ib.open(map, marker);
// the second should be: 
id.open(map, firststreetbeachMARKER);

proof of concept fiddle

代码段：

function initMap() {
  var west = {
    lat: 39.288682,
    lng: -74.565635
  };

  var firststreetbeach = {
    lat: 39.2807806,
    lng: -74.5575138
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: west,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    styles: [{
      featureType: "poi",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]

  });

  var marker = new google.maps.Marker({
    map: map,
    draggable: false,
    position: west,
    visible: true
  });
  marker.setTitle("west");


  var firststreetbeachMARKER = new google.maps.Marker({
    position: firststreetbeach,
    map: map
  });
  firststreetbeachMARKER.setTitle("First Street Beach");

  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
  boxText.innerHTML =
    `<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`

  var firststreetbeachBOX = document.createElement("div");
  firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
  firststreetbeachBOX.innerHTML =
    `<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-120, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.90,
      width: "235px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  google.maps.event.addListener(marker, "click", function(e) {
    ib.setOptions(myOptions);
    ib.open(map, this);
  });
  var ib = new InfoBox(myOptions);
  ib.open(map, marker);
  map.panTo(ib.getPosition())



  var myOptionsa = {
    content: firststreetbeachBOX,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-120, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.90,
      width: "235px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
    ib.setOptions(myOptionsa);
    ib.open(map, this);
  });
  var id = new InfoBox(myOptionsa);
  id.open(map, firststreetbeachMARKER);
  map.panTo(id.getPosition())

}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

.action-btns {
  float: left;
  width: 70px;
  overflow: hidden;
  position: relative;
  top: 12px;
  left: 6px;
}

<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

无法使用Google Maps API实现两个信息框

1 个答案: