我在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键在这段代码,请任何人的帮助。提前致谢
尝试更改这一行:
<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>