javascript - Google Maps Javascript API 正在返回静态图像

Question

我正在通过 AJAX 加载 googlemap，出于某种原因，它返回静态 map 图像(正确居中)，但我无法平移、缩放或任何其他有点无用的控件。这是我通过 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。