提问者:小点点

google地图显示无法正确加载html地图


我在html和javascript中有一个地图部分,该部分如下所示:

null

CustomMarker.prototype = new google.maps.OverlayView();

function CustomMarker(opts) {
  this.setValues(opts);
}

CustomMarker.prototype.draw = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    div = this.div = $('' +
      '<div>' +
      '<div class="shadow"></div>' +
      '<div class="pulse"></div>' +
      '<div class="pin-wrap">' +
      '<div class="pin"></div>' +
      '</div>' +
      '</div>' +
      '')[0];
    this.pinWrap = this.div.getElementsByClassName('pin-wrap');
    this.pin = this.div.getElementsByClassName('pin');
    this.pinShadow = this.div.getElementsByClassName('shadow');
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click", event);
    });
  }
  var point = this.getProjection().fromLatLngToDivPixel(this.position);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.animateDrop = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
    'opacity': '1',
  });
  dynamics.animate(this.pinWrap, {
    translateY: 0,
    scaleY: 1.0,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 1800,
    bounciness: 600,
  })

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'scale(0,0)',
  });
  dynamics.animate(this.pinShadow, {
    scale: 1,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });
}

CustomMarker.prototype.animateBounce = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    translateY: -30
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 0,
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 600,
    delay: 650,
  });

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'none',
  });
  dynamics.animate(this.pinShadow, {
    scale: 0.6,
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });
}

CustomMarker.prototype.animateWobble = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    rotateZ: -45,
  }, {
    type: dynamics.bounce,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleX: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 1800,
  });
}

$(function() {
  var pos = new google.maps.LatLng(17.402507, 78.484450);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: pos,
    disableDefaultUI: true,
  });

  var marker = new CustomMarker({
    position: pos,
    map: map,
  });

  google.maps.event.addListener(marker, 'click', function(e) {
    marker.animateWobble();
  });

  $('#drop').on('click', function(e) {
    marker.animateDrop();
  });

  $('#wobble').on('click', function(e) {
    marker.animateWobble();
  });

  $('#bounce').on('click', function(e) {
    marker.animateBounce();
  })
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Raleway:600,900,400|Roboto:300,700' rel='stylesheet'>
<div id="map">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15228.829609290426!2d78.46827062015056!3d17.401831576090753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9900853b7663%3A0xff5ff705a04cebb!2sBook%20The%20Party!5e0!3m2!1sen!2sin!4v1597715101831!5m2!1sen!2sin"
    width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

null

我在javascript中添加了纬度和经度,但是它没有正确加载,它仍然显示没有正确加载的地图。由于我对此是新的,我在谷歌上搜索,看到我需要添加API键在这,但我在哪里添加API键在这段代码,请任何人的帮助。提前致谢


共1个答案

匿名用户

尝试更改这一行:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

对此:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY" type="text/javascript"></script>

相关问题