Question

我使用png图片将自定义叠加层放置在Google地图上。我也有标记放置在地图上，在添加叠加之前标记看起来非常好，当我添加叠加时它仍然渲染良好，但标记不会在叠加上显示。我想在叠加上获得标记，我该怎么做？

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var markers = [];
var map;
var india = new google.maps.LatLng(23.9800,85.3500);
var image = 'images/pushpins/set1.png';

function initialize() {
  var mapOptions = {
    zoom: 5,
    disableDefaultUI: true,
    center: india
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(0.615223, 67.368164);
  var neBound = new google.maps.LatLng(41.996828, 104.890);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'images/india.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);

  drop(3000);

  setTimeout(function() {
    clearMarkers();
   // initialize();
  }, 19000);

}

function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length; i++) {
    var city = locations[i][0];
    var pro_cat = locations[i][1];
    var product_image = locations[i][3];
    addMarkerWithTimeout(locations[i][2], i * 500);  
    getCity(city,pro_cat, i * 500);
    if(product_image == null)
    {
        //if image found in row-do nothing
    }
    else {
      //if image found 
      showdiv(city,product_image, i * 500);
      /*window.setTimeout(function() {
         hidediv();
      },2500);*/
    }
  }
}


function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}
// [END region_constructor]

// [START region_attachment]
/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
// [END region_attachment]

// [START region_drawing]
USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]

// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};
// [END region_removal]



function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      icon: image,
      optimized: false,
      //animation: google.maps.Animation.DROP
    }));
  }, timeout);
  //alert("hello");
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  document.getElementById('order_list').innerHTML = "";
  document.getElementById('product-list-display').style.display = "none";
}

function getCity(city_name, product_cat, timeout){
  window.setTimeout(function() {
  var writecity = document.createTextNode(city_name+', '+product_cat);
  document.getElementById("order_list").appendChild(writecity);
  document.getElementById("order_list").appendChild(document.createElement('br'));
  }, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

你的问题是map函数中使用的addMarkerWithTimeout变量是全局版本，它永远不会被初始化，而不是初始化函数的本地版本，它是包含的函数。对google.maps.Map对象的引用，并添加了叠加层。在初始化函数中删除它之前的var，以便初始化全局版本：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

working fiddle

代码段

＆＃13;

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var markers = [];
var map;
var india = new google.maps.LatLng(23.9800, 85.3500);
var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
var locations = [];

function showdiv() {}

function initialize() {
  var mapOptions = {
    zoom: 5,
    disableDefaultUI: true,
    center: india
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(0.615223, 67.368164);
  var neBound = new google.maps.LatLng(41.996828, 104.890);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  var sw = bounds.getSouthWest();
  var ne = bounds.getNorthEast();
  for (var i = 0; i < 100; i++) {
    var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
    var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
    var point = new google.maps.LatLng(ptLat, ptLng);
    locations[i] = ["city" + i, "cat" + i, point, ""];
  }

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);

  drop(3000);

  setTimeout(function() {
    clearMarkers();
    // initialize();
  }, 19000);

}

function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length; i++) {
    var city = locations[i][0];
    var pro_cat = locations[i][1];
    var product_image = locations[i][3];
    addMarkerWithTimeout(locations[i][2], i * 500);
    getCity(city, pro_cat, i * 500);
    if (product_image == null) {
      //if image found in row-do nothing
    } else {
      //if image found 
      showdiv(city, product_image, i * 500);
      /*window.setTimeout(function() {
         hidediv();
      },2500);*/
    }
  }
}


function USGSOverlay(bounds, image, map) {

    // Initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay.
    this.setMap(map);
  }
  // [END region_constructor]

// [START region_attachment]
/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
// [END region_attachment]

// [START region_drawing]
USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]

// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};
// [END region_removal]



function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      icon: image,
      optimized: false,
      title: "marker " + markers.length,
      //animation: google.maps.Animation.DROP
    }));
  }, timeout);
  //alert("hello");
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  document.getElementById('order_list').innerHTML = "";
  document.getElementById('product-list-display').style.display = "none";
}

function getCity(city_name, product_cat, timeout) {
  window.setTimeout(function() {
    var writecity = document.createTextNode(city_name + ', ' + product_cat);
    document.getElementById("order_list").appendChild(writecity);
    document.getElementById("order_list").appendChild(document.createElement('br'));
  }, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="order_list"></div>
<div id="product-list-display"></div>

＆＃13;

Google地图标记不会显示在地图叠加层上

1 个答案: