Question

我正在通过AJAX加载googlemap，并且为了某些原因，它正在返回静态地图图像（正确居中），但我无法平移，缩放或任何其他有点无用的控件。这是我通过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的代码。这不可行。

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

Answer 2

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

ShowHide功能不在此处，因此我将其标记并设置全局var gallery_photo_create_map_check = 0

它对我有用。 enter image description here

Answer 3

在对您的代码进行一些黑客攻击之后，我就开始了。

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

看看这里： Google map error: a is null

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

map.disableDoubleClickZoom = false;
scrollwheel:false

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

如果这不能解决您的问题，请在某处托管您的代码，以便我们可以看到问题被复制。尝试以您要求的方式对代码进行故障排除不会吸引很多人来查看问题。

Google Maps Javascript API正在返回静态图片

3 个答案: