为什么我的脚本有时有效？

时间：2015-08-28 23:16:46

标签： javascript html google-maps-api-3

请原谅我的不好问题，但我不知道如何描述这个问题 我使用谷歌地图多边形和信息框。 我想将信息框放在适当的多边形上方。 有我的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>

此处按钮Click应绘制4个多边形并向其添加InfoBoxes

上面的代码有效，但有时只是（魔术？！？！）。我经常在页面加载时遇到下一个错误：

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

或

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

如果出现其中一个错误，我按下按钮（创建infoBox的按钮调用功能）我得到下一个错误：

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

我接下来会观察：如果我只是打开浏览器（Chrome）并打开这个Html页面它会工作，但如果我重新加载页面它会破坏。例如，当我首先在此处运行我的代码片段（SoF）时，它可以工作，但在hide result - ＆gt;之后run code s..它不起作用。

我不知道发生了什么，为什么......

1 个答案:

答案 0 :(得分：1)

删除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>

相关问题
最新问题