Google 地图 Javascript API 返回静态图像

Question

我正在通过 AJAX 加载谷歌地图，出于某种原因，它返回静态地图图像（正确居中），但我无法平移、缩放或任何其他有点无用的控件。这是我通过appendChild()输入的javascript和HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">

    var map;

    var map_icon_green = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/green_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_blue = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/blue_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_yellow = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/yellow_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_red = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/red_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_shadow = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/shadow.png",
        new google.maps.Size(28,20),
        new google.maps.Point(-6,0));

    var map_crosshair = new google.maps.MarkerImage("http://www.mysite.com/images/site/cross-hair.gif",
        new google.maps.Size(17,17),
        new google.maps.Point(0,0));




    alert('here');
    var google_place_add_interval = 0;
    function google_place_add(map) {
        if(map.getCenter()!=null) {
            cMarker = new google.maps.Marker({
                map: map,
                icon: map_crosshair
            });
            var center = map.getCenter();

            cMarker.setPosition(map.getCenter());
            document.getElementById("gallery_map_points_1845187_long").value=center.lng();
            document.getElementById("gallery_map_points_1845187_lat").value=center.lat();

             google.maps.event.addListener(map, 'center_changed', function() { 
                var center = map.getCenter(); 
                cMarker.setPosition(center); 
                document.getElementById("gallery_map_points_1845187_long").value=center.lng();
                document.getElementById("gallery_map_points_1845187_lat").value=center.lat();
            }); 
            window.clearInterval(google_place_add_interval);
        }
    }function gallery_map_upload_1845187() {
        var myOptions = {
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel:false
        }



        map = new google.maps.Map(document.getElementById('gallery_map_loader_1845187'),myOptions);

         map.setCenter(new google.maps.LatLng(53.42,-1.242));


        map.disableDoubleClickZoom = false;


            //var customUI = map.getDefaultUI();
            //customUI.controls.scalecontrol = false;
            //map.setUI(customUI);

        function TextualLocationFinder() {

            // Creates a one DIV for each of the buttons and places them in a container
            // DIV which is returned as our control element. We add the control to
            // to the map container and return the element for the map class to
            // position properly.

            var container = document.createElement("div");


            var search_text = document.createElement("input");
            search_text.type='text';
            search_text.id='map_location_search_input';



            var search_button = document.createElement("input");
            search_button.type='button';
            search_button.value = 'Search';

            container.style.marginLeft = '5px';

            google.maps.event.addDomListener(search_button, 'click', function() {
                var geocoder = new google.maps.Geocoder();
                        geocoder.geocode( { 'address': document.getElementById('map_location_search_input').value,'region': "UK"}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {  
                            map.setCenter(results[0].geometry.location);
                            map.setZoom(13);

                        } else {
                            alert(document.getElementById('map_location_search_input').value + " not found");
                        }
                    });
                });



                container.appendChild(search_text);
                container.appendChild(search_button);

                return container;   

            }
            alert('load');
            map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(TextualLocationFinder());


            //map.addControl(new TextualLocationFinder());

            map.streetViewControl = false;      
            google_place_add_interval = setInterval("google_place_add(map)", 500 );
}


function map_create_marker(point,html,icon) {
    var marker =    new google.maps.Marker({
        position: point,
        map: map,
        icon: icon
    });

    if(html!="") {
        marker['number'] = 1;
        var infowindow = new google.maps.InfoWindow({
                content: html
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    }

    return marker;
}
var map_set_center = 0;
function map_load_resize() {
    if(map_set_center==0) {
         map.setCenter(new google.maps.LatLng(53.42,-1.242));
    }
    map_set_center = 1;
}

</script>
<table><tr><td class="field_name field_padding_min" valign="top">Include Map Location:</td><td><input onclick="gallery_photo_create_map(this,'1845187');" id="map_location_1845187" name="map_location" type="checkbox" value="1" />
            <span class="form_hint">Check this to add your photo to a map.</span> <span class="small_text red_highlight"><strong>The location you enter will be viewable by others</strong></span>
            <input type="hidden" name="gallery_map_points_lat" id="gallery_map_points_1845187_lat" value=""/>
            <input type="hidden" name="gallery_map_points_long" id="gallery_map_points_1845187_long" value=""/>
            </td></tr>
            <tr><td colspan="2"><div id="gallery_map_loader_1845187" ></div></td></tr>
            </table>

作为参考，这是在复选框单击时调用的函数：

function gallery_photo_create_map(checkbox,loader) {
    if(!loader){
        loader = '';
    }
    if(checkbox.checked==true) {
        document.getElementById('gallery_map_loader'+loader).style.height = '200px';
        ShowHide('gallery_map_loader'+loader,'visible');
        if(gallery_photo_create_map_check==0) {
            //gallery_map_upload();
            func_name = 'gallery_map_upload'+loader;
            window[func_name]();
        }

        gallery_photo_create_map_check= 1;

    }
    else  {
        document.getElementById('gallery_map_loader'+loader).style.height = '0px';
        ShowHide('gallery_map_loader'+loader,'hidden');
    }
}

Answer 1

您似乎正在使用 Google Maps API V3 和 V2 的代码。这是不可行的。

示例：您在 map_load_resize 函数中引用 new GLatLng。您需要将 v2 引用更改为其等效的 V3 引用。例如，new GLatLng 实际上应该是 new google.maps.LatLng。

Answer 2

您的检查点击事件是错误的，请尝试 gallery_photo_create_map(this,'_1845187');

ShowHide 函数不在这里，所以我标记了它并设置了一个全局 var gallery_photo_create_map_check = 0

它有效为我。

Answer 3

经过对你的代码进行一些修改后，我让它工作了。

首先，您需要为正在使用的 div 设置精确的大小，并且需要调用 body 元素中的 onload 事件。

看看这里：
Google 地图错误：a 为 null

您可能无法缩放，因为您有代码中包含以下几行：

map.disableDoubleClickZoom = false;
scrollwheel:false

这将禁用最常见的缩放方式。它通过使用左侧的滑块进行缩放。

如果这不能解决您的问题，那么请善意地将您的代码托管在某个地方，以便我们可以看到问题被复制。尝试按照您要求的方式对代码进行故障排除不会吸引很多人关注该问题。