Google Maps API V3 - 调整大小时自定义 .GIF 标记未在 IE 中显示

发布于 2024-12-18 11:27:59 字数 1791 浏览 1 评论 0原文

一段时间以来我一直试图解决这个问题，但似乎无法让它发挥作用或在留言板上找到解决方案。

我正在尝试使用 API V3 在谷歌地图中使用自定义标记。它需要是 .gif 文件而不是 .png，因为 IE 似乎不支持 .png 中的 Alpha 通道。它还需要缩小尺寸，因为它是一个相当复杂的图像，其中包含我正在使用的文本，当您在 Photoshop/Paint 中调整图像大小时，所有细节都会丢失，并且变得非常像素化。我发现解决这个问题的唯一方法似乎是通过在 .html 文件中缩放它。

我当前的 html 解决方案适用于 FF、Chrome、Safari 和 Safari。 Opera，但不是 IE（我什至没有得到地图，只是一个空白的白屏）。

任何帮助将不胜感激，因为我在网上搜索时似乎没有得到任何结果。我的 HTML 文件打印如下...

谢谢

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Map</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">


        function initialize() {
            var latLng = new google.maps.LatLng(51.500656, -0.124594);


            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 14,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });




            var marker = new google.maps.Marker({
                position: latLng,
                draggable: true,
                map: map,
                icon: new google.maps.MarkerImage("http://www.activityvillage.co.uk/images/Big_Ben.gif", null, null, new google.maps.Point(66, 200), new google.maps.Size(136, 200)),
            });


            var label = new Label({
                map: map
            });


            label.bindTo('position', marker, 'position');
            label.bindTo('text', marker, 'position');
        };

    </script>
</head>
    <body onload="initialize()">

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

    </body>
</html>

原文

I have been trying to figure this out for some time and can't seem to get it to work or find a solution on the message board.

I am trying use a custom marker in a google map using API V3. It needs to be a .gif file rather than a .png as IE doesn't seem to support the alpha channel in the .png.
It also needs to be scaled down in size as it is quite a complex image with text that I am using and when you resize the image in photoshop/paint all the detail is lost and it becomes very pixelated. I have found that the only way around this seems to be through scaling it within the .html file.

My current html solution works in FF, Chrome, Safari & Opera, but not in IE (I don't even get a map just a blank white screen).

Any help would be greatly appreciated, as I don't seem to be getting anywhere when searching online. My HTML file is printed below....

Thanks

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Map</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">


        function initialize() {
            var latLng = new google.maps.LatLng(51.500656, -0.124594);


            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 14,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });




            var marker = new google.maps.Marker({
                position: latLng,
                draggable: true,
                map: map,
                icon: new google.maps.MarkerImage("http://www.activityvillage.co.uk/images/Big_Ben.gif", null, null, new google.maps.Point(66, 200), new google.maps.Size(136, 200)),
            });


            var label = new Label({
                map: map
            });


            label.bindTo('position', marker, 'position');
            label.bindTo('text', marker, 'position');
        };

    </script>
</head>
    <body onload="initialize()">

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

    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

街角迷惘 2024-12-25 11:27:59

尝试删除标记结构中的最后一个逗号：

var marker = new google.maps.Marker({
    position: latLng,
    draggable: true,
    map: map,
    icon: new google.maps.MarkerImage(
        "http://www.activityvillage.co.uk/images/Big_Ben.gif", 
        null, 
        null, 
        new google.maps.Point(66, 200), 
        new google.maps.Size(136, 200)
    )
});

由于类似的错误，我的地图根本没有显示。引用 Zepher Dev 的话说：

“Javascript 中可能存在许多错误，这些错误可能会导致 Google 地图丢失。但是，我的问题是尾随逗号。IE7（有时还有 IE8）不喜欢尾随逗号，因为它需要一个标识符，因此警告：“预期的标识符。”

希望这对你有用！

Try removing the last comma in the marker structure:

var marker = new google.maps.Marker({
    position: latLng,
    draggable: true,
    map: map,
    icon: new google.maps.MarkerImage(
        "http://www.activityvillage.co.uk/images/Big_Ben.gif", 
        null, 
        null, 
        new google.maps.Point(66, 200), 
        new google.maps.Size(136, 200)
    )
});

My map wasn't showing at all because of a similar mistake. To quote Zepher Dev:

"There are many possible errors in Javascript that could account for the missing Google map. However, my issue was with trailing commas. IE7 (and sometime IE8) does not like trailing commas because it expects an identifier—hence the warning: “expected identifier.”

Hope this works for ya!

回复收藏 0 原文

~没有更多了~