如何更改Google静态地图位置的SRC

时间:2013-01-21 07:32:36

标签: jquery google-maps

在页面的Jquery Mobile内容中,我有一个像这样的img src:

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

我有一个按钮和代码,用于在javascript中更改上述IMG的SRC

<script type="text/javascript">
        function update()
        {
            cval = '"https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&amp;zoom=14&amp;size=288x200&amp;markers=Brisbane&amp;sensor=false"'
            $('#map').attr('src',cval);

        }
    </script>

页面加载正常并显示地图图像。但是当我从一个按钮调用脚本时,我收到一个错误,图像显示不显示。查看Chrome Inspect Elements,第一个调用是GET并加载图像,但第二个调用也是GET但不起作用且错误是“禁止”

我正在尝试创建一个移动页面,以便当用户输入新位置并单击“刷新”时,我想将IMG更新到新位置,但这会给我一个错误。

那么这里有什么问题?为什么第一个GET工作但不是第二个以及如何使其工作?

同样只是在浏览器中粘贴网址也不起作用。

1 个答案:

答案 0 :(得分:1)

我通过制作新的<img>来解决这个问题,而不仅仅是切换src属性。

http://jsfiddle.net/lollero/VKAW9/1

HTML:

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

jQuery的:

$('html').on("click", function() {

    var map = $('#map'),
       cval = 'https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&amp;zoom=14&amp;size=288x200&amp;markers=Brisbane&amp;sensor=false';

    $('<img id="map" height="200" width="288" src="'+ cval +'">').insertAfter( map );
    map.remove();

});