为什么我的脚本有时会起作用？

Question

Excuse me for bad question but I do not know how describe the problem short.请原谅我的问题不好，但我不知道如何简短地描述问题。
I work with google maps polygons and infoboxes.我使用谷歌地图多边形和信息框。 I want to put infobox above the appropriate polygon.我想将信息框放在适当的多边形上方。 There is my html page:有我的 html 页面：

 <!DOCTYPE html > <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100%; background-color: #666970; height: 100%; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry&callback=initMap" async defer></script> </head> <body> <button onclick="init();">click</button> <div id="map_canvas" style="width: 100%; height: 100%"></div> <script charset="windows-1251"> var map, drawingManager; var nameLbl, squareLbl, measurLbl; var hashMap = {}; function init() { drawField('#B31A1A', '{"id":3,"name":"f 1","square":195.28908145724327,"coordinates":[{"x":49.8487204421998,"y":24.842748641967773},{"x":49.8333322745551,"y":24.83485221862793},{"x":49.830342637935054,"y":24.866437911987305},{"x":49.8393109933889,"y":24.874248504638672},{"x":49.835712778953,"y":24.853477478027344},{"x":49.84340709620261,"y":24.841890335083008}]}') drawField('#FFFF66', '{"id":2,"name":"поле 1","square":2071.74083964712,"coordinates":[{"x":49.883574784125486,"y":24.747047424316406},{"x":49.842632184448846,"y":24.72576141357422},{"x":49.82690986428329,"y":24.756317138671875},{"x":49.86698061491844,"y":24.813308715820312}]}') drawField('#FFFF66', '{"id":1,"name":"поле 3","square":2241.861790546082,"coordinates":[{"x":49.738237875605215,"y":24.63958740234375},{"x":49.696950113578005,"y":24.69451904296875},{"x":49.72092792670335,"y":24.737091064453125},{"x":49.74178787137199,"y":24.72198486328125},{"x":49.74844341339525,"y":24.664993286132812}]}') drawField('#FFFF66', '{"id":0,"name":"поле 2","square":1322.7297777772405,"coordinates":[{"x":49.87074245972463,"y":24.709625244140625},{"x":49.79988210788039,"y":24.654006958007812},{"x":49.801654882229286,"y":24.702072143554688}]}') } function drawField(color, fieldStr) { var field = JSON.parse(fieldStr); var coords = []; for (var i = 0; i < field.coordinates.length; i++) coords.push({ lat: field.coordinates[i].x, lng: field.coordinates[i].y }); var polygon = new google.maps.Polygon({ paths: coords, fillColor: color, strokeWeight: 1 }); polygon.setMap(map); //var contentStr = "<b>" + nameLbl + ":</b> " + field.name + '<br/>' + '<b>' + squareLbl + ':</b> ' + field.square + measurLbl; var contentStr = "<b>nameLbl :</b> field.name <br><b>squareLbl:</b> field.square + measurLbl"; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < field.coordinates.length; i++) { bounds.extend(new google.maps.LatLng(field.coordinates[i].x, field.coordinates[i].y)); } var myLatlng = bounds.getCenter(); var myOptions = { content: contentStr, boxStyle: { border: "1px solid black", textAlign: "center", backgroundColor: "white", opacity: "0.7", fontSize: "8pt", width: "150px" }, disableAutoPan: true, pixelOffset: new google.maps.Size(-75, -10), position: myLatlng, closeBoxURL: "", isHidden: false, pane: "floatPane", enableEventPropagation: true }; var box = new InfoBox(myOptions); box.open(map); polygon.infoWindow = new google.maps.InfoWindow({ content: contentStr, }); google.maps.event.addListener(polygon, 'click', function(e) { polygon.infoWindow.setPosition(e.latLng); polygon.infoWindow.open(polygon.map); }); hashMap['fieldId_' + field.id] = polygon; } function initMap() { var latlng = new google.maps.LatLng(49.838411464881915, 24.85581636428833); var mapOptions = { zoom: 14, center: latlng, navigationControl: false, streetViewControl: false, backgroundColor: "#666970" }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: false }); drawingManager.setMap(map); } </script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> </body> </html>

Here button Click should draw 4 polygons and add InfoBoxes to them Click此处按钮应绘制 4 个多边形并向其添加信息InfoBoxes

The code above works but only sometimes (magic?!?!).上面的代码有效，但只是有时（魔术？！？！）。 Often I get the next errors when page loaded:加载页面时，我经常会收到下一个错误：

TypeError: google.maps.OverlayView is not a constructor
InfoBox.prototype = new google.maps.OverlayView();

or或者

ReferenceError: google is not defined
InfoBox.prototype = new google.maps.OverlayView();

If one of these errors occur and I press the button (button invoke function where infoBox is created) I get next error:如果发生这些错误之一并且我按下按钮（创建infoBox按钮调用函数），我会收到下一个错误：

TypeError: box.open is not a function
box.open(map);

Also I observe next: if I just open browser (Chrome) and open this Html page it will work but if I reload page it will broke.我接下来观察：如果我只是打开浏览器（Chrome）并打开这个 Html 页面，它会工作，但如果我重新加载页面，它会坏掉。 For example when I run my code snippet here firstly(SoF) it works, but after hide result -> run code s.. it does not work.例如，当我首先在这里运行我的代码片段（SoF）时，它可以工作，但是在hide result -> run code s..它不起作用。

I have no idea what is going on and why..我不知道发生了什么以及为什么..

Answer 1

Remove async and refer , and call initMap at the end of the script移除async和refer ，并在脚本末尾调用initMap

 <!DOCTYPE html > <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100%; background-color: #666970; height: 100%; } </style> </head> <body> <button onclick="init();">click</button> <div id="map_canvas" style="width: 100%; height: 100%"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry" ></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <script charset="windows-1251"> var map, drawingManager; var nameLbl, squareLbl, measurLbl; var hashMap = {}; function init() { drawField('#B31A1A', '{"id":3,"name":"f 1","square":195.28908145724327,"coordinates":[{"x":49.8487204421998,"y":24.842748641967773},{"x":49.8333322745551,"y":24.83485221862793},{"x":49.830342637935054,"y":24.866437911987305},{"x":49.8393109933889,"y":24.874248504638672},{"x":49.835712778953,"y":24.853477478027344},{"x":49.84340709620261,"y":24.841890335083008}]}') drawField('#FFFF66', '{"id":2,"name":"поле 1","square":2071.74083964712,"coordinates":[{"x":49.883574784125486,"y":24.747047424316406},{"x":49.842632184448846,"y":24.72576141357422},{"x":49.82690986428329,"y":24.756317138671875},{"x":49.86698061491844,"y":24.813308715820312}]}') drawField('#FFFF66', '{"id":1,"name":"поле 3","square":2241.861790546082,"coordinates":[{"x":49.738237875605215,"y":24.63958740234375},{"x":49.696950113578005,"y":24.69451904296875},{"x":49.72092792670335,"y":24.737091064453125},{"x":49.74178787137199,"y":24.72198486328125},{"x":49.74844341339525,"y":24.664993286132812}]}') drawField('#FFFF66', '{"id":0,"name":"поле 2","square":1322.7297777772405,"coordinates":[{"x":49.87074245972463,"y":24.709625244140625},{"x":49.79988210788039,"y":24.654006958007812},{"x":49.801654882229286,"y":24.702072143554688}]}') } function drawField(color, fieldStr) { var field = JSON.parse(fieldStr); var coords = []; for (var i = 0; i < field.coordinates.length; i++) coords.push({ lat: field.coordinates[i].x, lng: field.coordinates[i].y }); var polygon = new google.maps.Polygon({ paths: coords, fillColor: color, strokeWeight: 1 }); polygon.setMap(map); //var contentStr = "<b>" + nameLbl + ":</b> " + field.name + '<br/>' + '<b>' + squareLbl + ':</b> ' + field.square + measurLbl; var contentStr = "<b>nameLbl :</b>"+ field.name +"<br><b>squareLbl:</b>"+ field.square; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < field.coordinates.length; i++) { bounds.extend(new google.maps.LatLng(field.coordinates[i].x, field.coordinates[i].y)); } var myLatlng = bounds.getCenter(); var myOptions = { content: contentStr, boxStyle: { border: "1px solid black", textAlign: "center", backgroundColor: "white", opacity: "0.7", fontSize: "8pt", width: "150px" }, disableAutoPan: true, pixelOffset: new google.maps.Size(-75, -10), position: myLatlng, closeBoxURL: "", isHidden: false, pane: "floatPane", enableEventPropagation: true }; var box = new InfoBox(myOptions); box.open(map); polygon.infoWindow = new google.maps.InfoWindow({ content: contentStr, }); google.maps.event.addListener(polygon, 'click', function(e) { polygon.infoWindow.setPosition(e.latLng); polygon.infoWindow.open(polygon.map); }); hashMap['fieldId_' + field.id] = polygon; } function _initMap() { var latlng = new google.maps.LatLng(49.838411464881915, 24.85581636428833); var mapOptions = { zoom: 14, center: latlng, navigationControl: false, streetViewControl: false, backgroundColor: "#666970" }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: false }); drawingManager.setMap(map); } _initMap(); </script> </body> </html>

为什么我的脚本有时会起作用？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-28 23:33:57

为什么我的脚本有时会起作用？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-28 23:33:57

解决方案1
1 已采纳 2015-08-28 23:33:57