Question

我目前正在使用Browserify来处理我的JS文件。当我尝试加载GoogleMap Api aSync并将USGSOverlay应用于自定义图像叠加时出现错误。

我遵循了https://developers.google.com/maps/documentation/javascript/examples/map-simple-async和https://developers.google.com/maps/documentation/javascript/customoverlays。

一切都适用于简单的GoogleMaps但是只要我应用USGSOverlay，我就会遇到多个错误：Uncaught TypeError：this.draw不是函数WM15838：1

一定是我怎么称呼我的功能..？代码如下：

@Autowired
WebInvocationPrivilegeEvaluator webPrivs;

public void useIt() {
    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();

    boolean hasAdminAccess = webPrivs.isAllowed("/admin", authentication);

    boolean hasAdminPostAccess = webPrivs.isAllowed(null, "/admin", "POST", authentication);
}

Answer 1

USGSOverlay取决于Google Maps Javascript API v3。在加载代码之前，您无法定义它。在launchMap或initialize函数中定义它。

proof of concept fiddle

代码段

var overlay;
var map;
var USGSOverlay;
//map_area is defined inline, but for this post...
var map_area = new Array('45.684994,-73.731739', '45.684616,-73.732816', '45.684450,-73.732558', '45.684659,-73.732002', '45.684832,-73.731602');

window.launchMap = function() {
  /** @constructor */
  USGSOverlay = function(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);
  };
  USGSOverlay.prototype = new google.maps.OverlayView();
  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);
  };
  // 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;
  };


  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';
  };

  initialize();
};

function initialize() {


  var mapOptions = {
    zoom: 14,
    scrollwheel: false,
    center: new google.maps.LatLng(45.684163, -73.733305),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker_pin = "/images/site/Pin.png";
  var swBound = new google.maps.LatLng(45.678510, -73.747798);
  var neBound = new google.maps.LatLng(45.692415, -73.718118);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  // var srcImage = 'map.png';
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.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);

  infowindow = new google.maps.InfoWindow({
    content: "Chargement..."
  });


  var areaCoords = [];

  if (map_area.length > 0) {
    for (i = 0; i < map_area.length; i++) {
      areaCoords[i] = [];

      for (j = 0; j < map_area[i].length; j++) {
        coord = map_area[i][j].split(',');
        areaCoords[i][j] = new google.maps.LatLng(coord[0], coord[1]);
      }

      polygonMap = new google.maps.Polygon({
        paths: areaCoords[i],
        strokeColor: '#ff2205',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#ff2205',
        fillOpacity: 0
      });

      polygonMap.setMap(map);
    }
    // Add a listener for the click event.
    /*google.maps.event.addListener(polygonMap, 'click', function() {
    });    */
  }

  $('.block_unit').each(function(index, element) {

    var _lat = $(this).find('.address').data('lat');
    var _lng = $(this).find('.address').data('lng');
    latLng = new google.maps.LatLng(_lat, _lng);
    $(this).next('.map_popup').find('.text').html($(this).find('.block__title').html());
    var info = $(this).next('.map_popup').html();


    //info.find('.text').html($(this).find('.block__title').html());

    var marker = new google.maps.Marker({
      map: map,
      position: latLng,
      icon: new google.maps.MarkerImage(marker_pin)
    });

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
        content: info
      });
      infowindow.open(map, marker);
    });
  });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
    '&signed_in=true&callback=launchMap';
  document.body.appendChild(script);
}

window.onload = loadScript;

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

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

使用USGSOverlay加载GoogleMap Async

1 个答案: