Question

我一直在制作自定义Google地图。几天前，我注意到标记图标（从.png加载）不再出现了。同一问题适用于包含此地图的旧文件。标记的调用方式如下：

var locations = [
    ['Location1', 46.096678, 7.2281081, 'pin.png', 1],
    ['Location2', 46.0230159, 7.7428676, 'pin.png', 2],
    ['Location3', 46.1125509, 7.919948, 'pin.png', 3],
];

var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});

这里还提供了更完整的代码，过去常常有用：http://jsfiddle.net/geocodezip/4skyrs58/1/

有没有人知道可能是原因的任何弃用或必要的更新？

Answer 1

在附带的小提琴中，InfoBox存在问题。 Google地图来源已经从svn转移到git，如下所述：https://code.google.com/p/google-maps-utility-library-v3/。看起来InfoBox不包括在内。您可以在此处下载：https://github.com/mikejoyceio/google-maps-infobox/blob/master/infobox.js

Answer 2

Google代码上的InfoBox库已无法以可链接的形式提供。该库已移至GitHub。

请参阅此相关问题：Google Maps API V3 Infobox.js removed

updated fiddle

链接到github版本的代码段：

var map;
var markers = [];
var content = [];
var map = new google.maps.LatLng(46.2171749, 7.5984075);
var bounds = new google.maps.LatLngBounds();

function initialize() {

  var mapOptions = {
    zoom: 10,
    center: map
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var locations = [
    ['Location1', 46.096678, 7.2281081, 'pin.png', 1],
    ['Location2', 46.0230159, 7.7428676, 'pin.png', 2],
    ['Location3', 46.1125509, 7.919948, 'pin.png', 3],
  ];

  var infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 800,
    pixelOffset: new google.maps.Size(-400, 10),
    zIndex: null,
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(0, 0),
  });

  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      // icon: locations[i][3]
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infobox.open(map, marker);
        infobox.setContent(document.getElementById(locations[i][0]).cloneNode(true));
        map.panTo(marker.getPosition(0, 427));
        map.panBy(0, 400);
      }
    })(marker, i));
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

function myClick(id) {
  google.maps.event.trigger(markers[id], 'click');
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.infowindow {
  border: 1px solid black;
  margin-top: 8px;
  background: white;
  padding: 5px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<div id="Location1">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193571.43828905202!2d-74.11808638273646!3d40.7058253631455!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1461436300347"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>

<div id="Location2">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d88704.87577364442!2d7.671905434077621!3d45.990682827318246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f35a2292ee5cd%3A0x400ff8840196f70!2s3920+Zermatt%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437058426"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>

<div id="Location3">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44233.88369647231!2d7.936860760323751!3d46.13844402760392!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f45103f606a5d%3A0xb47592074f679662!2s3910+Saas-Grund%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437405679"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>

Google地图标记图标消失了

2 个答案: