由于标记对象,Google 地图无法加载

Posted

技术标签:

【中文标题】由于标记对象,Google 地图无法加载【英文标题】:Google map doesn't load because of Marker Object 【发布时间】:2012-08-08 14:38:52 【问题描述】:

地图在没有标记对象的情况下正确加载,但是当我在此结构上添加标记对象时它不会加载我的

<!doctype html>
<html>
    <head>
    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script type="text/javascript"> 

        $.geolocation.find(function(location) 
            var lat = location.latitude;
            var lng = location.longitude;

            var map = new google.maps.Map($('#mapDiv').get(0), 
                center: new google.maps.LatLng(lat, lng),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            );

            var pinColor = "FE7569";
            var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2" + pinColor,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
            var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35))

            var marker= new google.maps.Marker(
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: pinImage,
                shadow: pinShadow 
            );        
        );
    </script>
</head>
 <body>
    <div id="mapDiv" style="width:700px; height: 500px;"></div>
 </body>
</html>

页面script.js中包含的脚本

      (function($)

            $.extend($.support,
                geolocation:function()
                    return $.geolocation.support();
                
            );

            $.geolocation =         
                find:function(success, error, options)
                    if($.geolocation.support())
                        options = $.extend(highAccuracy: true, track: false, options);
                        ($.geolocation.object())[(options.track ? 'watchPosition' : 'getCurrentPosition')](function(location)
                            success(location.coords);
                        , function()
                            error();
                        , enableHighAccuracy: options.highAccuracy);     
                    else
                        error();                
                    
                ,
                object:function()
                    return navigator.geolocation;
                ,
                support:function()
                    return ($.geolocation.object()) ? true : false;
                
            ;

        )(jQuery);

我需要在谷歌地图中包含标记 另一个问题是这段代码只能在 Firefox 和 IE 上运行,但不能在 Google Chrome 上运行

【问题讨论】:

表示在geolocation对象上找到(thisFunction)并选中 当你发布代码时它清除了...... 【参考方案1】:

看看这个,我想这已经解决了,你的错误在 url 参数中,现在它也在 Chrome 中工作。您还可以根据需要通过替换FE7569 来更改标记的颜色。

例如: 73B5EB 33DE61

您可以做的另一件事是在标记中放置这样的文本:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=You%20are%20here|FE7569

例如:


您的代码的现场演示,但已更正:

http://jsfiddle.net/oscarj24/sPsxh/

希望这会有所帮助:-)

【讨论】:

非常感谢,当我发现标记现在显示在我的地图上的错误时,我简直不敢相信自己的眼睛,但整个地图在 Chrome 上不起作用我不知道为什么我认为这是与 Chrome 安全相关的问题,非常感谢

以上是关于由于标记对象,Google 地图无法加载的主要内容,如果未能解决你的问题,请参考以下文章

无法使用iOS Swift在Google地图上加载自定义图块

保存要离线加载的谷歌地图图像

填充超过 5 万个标记时,Google 地图未加载或卡住

Google Maps API JS - 从另一个JS文件访问标记位置

由于 TypeError,React 页面未加载:无法读取 null 的属性“地图”

Jquery mobile 和 google maps openinfowidow 加载而不是点击