Google Maps JS API(v3)InfoWindow脚本错误 - JSON未定义 [英] Google Maps JS API (v3) InfoWindow Script Error - JSON Undefined

查看:102
本文介绍了Google Maps JS API(v3)InfoWindow脚本错误 - JSON未定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在做一个相当不错的项目一两个月。我在点击地图上的标记时出现了一个奇怪的问题,它给出了一个非常模糊的脚本错误。从字面上看,就在昨天晚上,一切都运转良好,突然之间发生了这种情况。

首先,我简单看一下我的地图。只要这个表单(VB)加载,记录列表就从我的SQL Server数据库中提取。每个记录都会创建一个具有唯一ID的标记。 InfoWindow是为每个标记创建的,而InfoWindow则充满了该记录的列中的详细信息。我认真地让这部分工作完美无瑕。我可以点击地图上的不同标记,并打开它们的InfoWindow(如果已经打开,关闭之前的InfoWindow)。



(对不起,不得不将它们发布为链接,我没有10张发布图片的声望)。

现在,突然间,当我点击一个标记时,出现脚本错误。如果我选择是,则会显示另一个脚本错误。我无法弄清楚发生了什么事。如果我注释掉(有效禁用)标记的单击事件,则不会出现脚本错误,但InfoWindows当然不起作用。我这样做是为了看看脚本错误是否随着地图空闲而出现。我已经尝试清除InfoWindow的内容(只留下测试作为其内容)来排除这些内容;仍然得到脚本错误。我不知道这是否会出现在谷歌的一端。那可能吗?第一个脚本错误中指出的URL表明这是该脚本中的一个问题,我认为这将表明它可能在它们的最后?



最后,我的.htm。我应该澄清,我在Visual Basic程序中这样做。我在表单上创建了一个容器,并放置了一个WebBrowser对象。然后我有WebBrowser加载这个.htm页面。这仅仅在一两个夜晚之前就令人吃惊,我无法弄清楚问题所在。

 <!DOCTYPE html>我已经打开了两周前的备份,但这不起作用。 
< html>
< head>< title>< / title>
< meta name =viewportcontent =initial-scale = 1.0,user-scalable = no/>
< style type =text / css>
html {
height:100%;
}

body {
height:100%;
保证金:0;
padding:0;
}

#map_canvas {
height:100%;
}
< / style>

< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=true> < /脚本>

< script type =text / javascript>

var map;
var Markers = [];

函数初始化(zoomLevel,lat,lng,type){
//获取要开始的地图类型。
//需要将GoogleMapType枚举
//转换为实际的Google Map类型
var MapType;
switch(type){
case 1:
MapType = google.maps.MapTypeId.ROADMAP;
休息;
案例2:
MapType = google.maps.MapTypeId.TERRAIN;
休息;
案例3:
MapType = google.maps.MapTypeId.HYBRID;
休息;
案例4:
MapType = google.maps.MapTypeId.SATELLITE;
休息;
默认值:
MapType = google.maps.MapTypeId.ROADMAP;
};

var myLatlng = new google.maps.LatLng(lat,lng);
var myOptions = {zoom:zoomLevel,center:myLatlng,mapTypeId:MapType};
var MarkerSize = new google.maps.Size(48,48);

map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
//google.maps.event.addListener(map,'click',Map_Click);
google.maps.event.addListener(地图,'mousemove',Map_MouseMove);
google.maps.event.addListener(map,'idle',Map_Idle);



//函数Map_Click(e){
// window.external.Map_Click(e.latLng.lat(),e.​​latLng.lng ());
//

函数Map_MouseMove(e){
window.external.Map_MouseMove(e.latLng.lat(),e.​​latLng.lng());
}

函数Map_Idle(){
window.external.Map_Idle(); $ {
}

函数DeleteMarkers(){
if(Markers){
for(i in Markers){
Markers [i] .setMap(null );
google.maps.event.clearInstanceListeners(Markers [i]);
标记[i] = null;
}
Markers.length = 0;



函数LoadMarkers(JobID,CustomerName,PhotoURL,item,lat,lng,description,DateTimeRequested){
var MarkerLatLng = new google.maps。 LatLng(lat,lng);
var MarkerOption = {map:map,position:MarkerLatLng,title:name};
var Marker = new google.maps.Marker(MarkerOption);

var infowindow = new google.maps.InfoWindow(
{
content:< font size ='3'>< b>+ item +<< ; / b>< / font>+< font size ='1'>< br>请求:+ DateTimeRequested +:+ CustomerName +< / font>
+< hr width = 75%align ='left'>
+ description +< br>< br>< img width = '48'align ='center'src ='myURLHere + PhotoURL +'< / img>,
id:JobID
});

google.maps.event.addListener(Marker,'click',function(){
typeof infoWindowsOpenCurrently!=='undefined'&& info& infoWindowsOpenCurrently.close(); //如果有infowwindow当前打开,请关闭它
infowindow.open(map,this); //为所选标记打开一个新窗口
infoWindowsOpenCurrently = infowindow; //将新信息窗口设置为临时变量
});
google.maps.event.addListener(map,'click',function(){infowindow.close(Marker.get('map'),Marker)&&& amp; infoWindowsOpenCurrently == infowindow});

Markers.push(Marker);
MarkerLatLng = null;
MarkerOption = null;
}

函数GetSelectedMarker(){
typeof infoWindowsOpenCurrently!=='undefined'&& window.external.Get_Selected_Marker(infoWindowsOpenCurrently.id);
}
< / script>

< / head>
< body>
< div id =map_canvasstyle =width:100%; height:100%>
< / div>
< / body>
< / html>


解决方案

我在这里遇到同样的错误。我在WPF WebBrowser中使用Google Maps JS,3天前完美运行。今天有了相同的源代码,我得到了同样的错误。
将Google Maps JS的版本设置为3.17(src =http://maps.google.com/maps/api/js?v=3.17)。我做到了这一点:

 < script type =text / javascript
src =http:// maps .google.com /地图/ API / JS v = 3.17&安培;传感器=假/>

要了解更多信息,请查看 Google文档


I've been working on quite a nice program for a month or two now. I'm having an odd issue where clicking a marker on my map is giving a very vague script error. Literally just last night everything was working fine and all of a sudden this is happening.

First, here's a brief look at my map. As soon as this form (VB) loads, a list of records is pulled from my SQL Server database. A marker with a unique ID is created for each record. An InfoWindow is made for each marker, and the InfoWindow is filled with details from the columns for that record. I seriously had this part working flawlessly. I can click different markers on the map, and have their InfoWindow opened (while closing the previous InfoWindow if one was already open).

(Sorry for having to post these as links, I don't have the 10 reputation to post images). Now, all of a sudden when I click on a marker, I get the following script error. If I choose "Yes," another script error is shown. I can't figure out what's going on. If I comment out (effectively disabling) my click event for the marker, there is no script error, but of course the InfoWindows won't work. I did this to see if the script errors come up with the map just idling. I've tried clearing the content of the InfoWindow (leaving just "test" as its content) to rule that out; still get the script errors. I can't tell if this may be something going on on Google's end, I don't know. Is that possible? The URL noted in the first script error indicates that it's a problem in that script, which I think would indicate that this could be on their end?

And finally, my .htm. I should clarify that I am doing this in a Visual Basic program. I have a container on my form which I create and place a WebBrowser object into. Then I have the WebBrowser load this .htm page. This worked amazingly as of just a night or two ago and I can't figure out the problem. I've even opened a backup from two weeks ago and this isn't working.

<!DOCTYPE html>
<html>
<head><title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
        }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script>

    <script type="text/javascript">

        var map;
        var Markers = [];

        function Initialize(zoomLevel, lat, lng, type) {
            //Get the type of map to start.
            //Need to convert the GoogleMapType enum
            //to an actual Google Map Type
            var MapType;
            switch (type) {
                case 1:
                    MapType = google.maps.MapTypeId.ROADMAP;
                    break;
                case 2:
                    MapType = google.maps.MapTypeId.TERRAIN;
                    break;
                case 3:
                    MapType = google.maps.MapTypeId.HYBRID;
                    break;
                case 4:
                    MapType = google.maps.MapTypeId.SATELLITE;
                    break;
                default:
                    MapType = google.maps.MapTypeId.ROADMAP;
            };            

            var myLatlng = new google.maps.LatLng(lat, lng);
            var myOptions = { zoom: zoomLevel, center: myLatlng, mapTypeId: MapType };
            var MarkerSize = new google.maps.Size(48, 48);

            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
            //google.maps.event.addListener(map, 'click', Map_Click);
            google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
            google.maps.event.addListener(map, 'idle', Map_Idle);

            }

        //function Map_Click(e) {
        //    window.external.Map_Click(e.latLng.lat(), e.latLng.lng());
        //}  

        function Map_MouseMove(e) {
            window.external.Map_MouseMove(e.latLng.lat(), e.latLng.lng());
        }

        function Map_Idle() {
            window.external.Map_Idle();
        }

        function DeleteMarkers() {
            if (Markers) {
                for (i in Markers) {
                    Markers[i].setMap(null);
                    google.maps.event.clearInstanceListeners(Markers[i]);
                    Markers[i] = null;
                }
                Markers.length = 0;
            }
        }

        function LoadMarkers(JobID, CustomerName, PhotoURL, item, lat, lng, description, DateTimeRequested) {
            var MarkerLatLng = new google.maps.LatLng(lat, lng);
            var MarkerOption = { map: map, position: MarkerLatLng, title: name};
            var Marker = new google.maps.Marker(MarkerOption);

            var infowindow = new google.maps.InfoWindow(
                {
                    content: "<font size='3'><b>" + item + "</b></font>" + "<font size='1'><br>Requested: " + DateTimeRequested + " by: " + CustomerName + "</font>"
                        + "<hr width=75% align='left'>"
                        + description + "<br><br><img width='48' align='center' src='myURLHere" + PhotoURL + "'</img>",
                    id: JobID
                });

            google.maps.event.addListener(Marker, 'click', function () {
                typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is infowwindow currently open, close it
                infowindow.open(map, this); //Open a new one for the selected marker
                infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
            });
            google.maps.event.addListener(map, 'click', function () { infowindow.close(Marker.get('map'), Marker) && infoWindowsOpenCurrently == infowindow});

            Markers.push(Marker);
            MarkerLatLng = null;
            MarkerOption = null;
        }

        function GetSelectedMarker() {
            typeof infoWindowsOpenCurrently !== 'undefined' && window.external.Get_Selected_Marker(infoWindowsOpenCurrently.id);
        }
   </script>

</head>
<body>
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

解决方案

I'm with the same error here. I'm using Google Maps JS in WPF WebBrowser and 3 days ago was running perfectly. Today with the same source code I got that same error. Set the version of the Google Maps JS to 3.17 (src="http://maps.google.com/maps/api/js?v=3.17"). I did this:

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?v=3.17&sensor=false"/>

For more information check Google Documentation.

这篇关于Google Maps JS API(v3)InfoWindow脚本错误 - JSON未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆