可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have an XML, which is transformed to HTML via an XSLT. The XML is able to contain JavaScript, and it translates this correctly to HTML, as I do in many other pages as well. It just does not work with GoogleMaps, and I suspect, my JavaScript is faulty somewhere.

The relevant sections of the resulting HTML look like posted below.

What's happening in the HTML/in the Scripts:

The API is loaded from googleapis.com
A div with the ID map_canvas is created.
A function start() is defined, which is started via <body onload="start();">.
In this function, a variable map_canvas is created and passed the reference to the div object named map_canvas.
To control, that this step worked, I give the div the new background color red.
It works.
Next, I'd want to create the variable var_options and set initial values for center, zoom, and mapTypeId.
To control, that this step worked, I give the div the new background color blue.
This does not work, it stays red.
Hence, this instruction was not executed.
So I check if I can access the object google.maps at all.
if so, I give the div the new background color green.
This works, so I can access this object.
Cross check: If I comment out the statement loading the API, the color does not change.

To me, this looks like the following is faulty somewhere.

    var map_options = {         center: new google.maps.LatLng(44.54, -78.54),         zoom: 8,         mapTypeId: google.maps.MapTypeId.ROADMAP     }

But after several hours I still cannot figure out what it is.

<html>     <head>         ...         <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">         </script>          <script type="text/javascript">         function start()         {                var map_canvas = document.getElementById('map_canvas');  // If the element can be located, we make it green. Checked. // If we give the function another name than start, it won't be executed. Checked. map_canvas.style.backgroundColor = 'green';              if(typeof google.maps != 'undefined') { // If the google.maps object exists, we make the canvas red. Checked. // If the API was not loaded from googleapis (commented out), it will stay green.  map_canvas.style.backgroundColor = 'red';             }  // So why does the following not work?             var map_options = {                 center: new google.maps.LatLng(44.54, -78.54),                 zoom: 8,                 mapTypeId: google.maps.MapTypeId.ROADMAP             } // Not arriving here: map_canvas.style.backgroundColor = 'blue';  // Before going on, I want to solve above problem, so this is commented out. //            var map = new google.maps.Map(map_canvas, map_options); // map_canvas.style.backgroundColor = 'black';         }         </script>     </head>       <body onload="start();">         ...         <div style="width: 400px; height: 224px;" id="map_canvas"></div>         ...     </body> </html>

回答1:

I find the most common cause of this error is simply an invalid img src.

回答2:

I found this Google page. (Edit: As per 2017-Jun-16, the link is broken.) It seems undocumented, though. Click on the button. Works on both FF and IE. Check out the markup and the Javascript, it loads the map via a callback.

Thanks for putting me on the right track.

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Dynamic Loading</title> <script type="text/javascript">   function handleApiReady() {     var myLatlng = new google.maps.LatLng(-34.397, 150.644);     var myOptions = {       zoom: 8,       center: myLatlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     }     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   }    function appendBootstrap() {     var script = document.createElement("script");     script.type = "text/javascript";     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";     document.body.appendChild(script);   } </script> </head> <body style="margin:0px; padding:0px;">   <input type="button" value="Load Bootstrap + API" onclick="appendBootstrap()">   <div id="map_canvas" style="width:400px; height:400px"></div> </body> </html>

回答3:

My error was something similar (which is why I found this post), but only in Internet Explorer (version 11):

File: eval code (401), Line: 39, Column: 304

This was caused because I used svg-images as markers:

var marker = map.addMarker({     lat: position.coords.latitude,     lng: position.coords.longitude,     icon : {         url : '/images/marker.svg'     } });

Switching to png-images instead of svg solved my problem!

文章来源: InvalidStateError: “An attempt was made to use an object that is not, or is no longer, usable” in basic Google Map tutorial example

标签

javascript

脚本

maps