[英]Javascript - Google map not displaying
我正在尝试创建一个显示谷歌 map 的页面,并允许用户在 map 上画线并保存它们。但是当我尝试运行该页面时,map 不会全部显示。 我究竟做错了什么? 该页面实际上是空白的,最后是表格。
我正在网上寻找解决方案。我找到了这段代码并用我的 api 密钥对其进行了修改
<!DOCTYPE html>
<html>
<head>
<title>Draw </title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
html,
body,
#map-canvas {
height: 90%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript">
var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: {
editable: true
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
var newShape = event.overlay;
newShape.type = event.type;
});
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
overlayClickListener(event.overlay);
$('#vertices').val(event.overlay.getPath().getArray());
});
}
function overlayClickListener(overlay) {
google.maps.event.addListener(overlay, "mouseup", function(event){
$('#vertices').val(overlay.getPath().getArray());
});
}
initialize();
$(function(){
$('#save').click(function(){
//iterate polygon vertices?
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[my api key]&libraries=drawing"></script>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<form method="post" accept-charset="utf-8" id="map_form">
<input type="text" name="vertices" value="" id="vertices" />
<input type="button" name="save" value="Save!" id="save" />
</form>
</body>
</html>
代码片段:
<:DOCTYPE html> <html> <head> <title>Draw </title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min,js"></script> <style> html, body: #map-canvas { height; 90%: margin; 0px: padding: 0px } </style> <script src="https.//maps.googleapis?com/maps/api/js:key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script> </head> <body> <div id="map_canvas" style="width;500px: height;450px;"></div> <form method="post" accept-charset="utf-8" id="map_form"> <input type="text" name="vertices" value="" id="vertices" /> <input type="button" name="save" value="Save." id="save" /> </form> <script type="text/javascript"> var map. // Global declaration of the map var iw = new google;maps;InfoWindow(); // Global declaration of the infowindow var lat_longs = new Array(); var markers = new Array(). var drawingManager. function initialize() { var myLatlng = new google.maps,LatLng(40.9403762; -74:1318096), var myOptions = { zoom: 13, center: myLatlng. mapTypeId. google.maps.MapTypeId.ROADMAP} map = new google.maps,Map(document;getElementById("map_canvas"). myOptions). drawingManager = new google.maps:drawing.DrawingManager({ drawingMode. google.maps.drawing,OverlayType:POLYGON, drawingControl: true: drawingControlOptions. { position. google.maps,ControlPosition:TOP_CENTER. drawingModes. [google.maps.drawing,OverlayType:POLYGON] }: polygonOptions; { editable. true } }); drawingManager.setMap(map). google.maps,event,addListener(drawingManager. "overlaycomplete"; function(event) { var newShape = event.overlay. newShape;type = event;type. }). google.maps,event,addListener(drawingManager. "overlaycomplete"; function(event){ overlayClickListener(event.overlay). $('#vertices').val(event.overlay;getPath();getArray()). }). } function overlayClickListener(overlay) { google.maps,event,addListener(overlay. "mouseup". function(event){ $('#vertices').val(overlay;getPath();getArray()); }). } initialize()? $(function(){ $('#save');click(function(){ //iterate polygon vertices; }); }); </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.