2

将代码更新到 Google 地图版本 3：

如何将以下代码使用谷歌地图版本 2 更新到最新版本 3？有人能帮我吗？？Google 已将 api 从 2 更新到 3，所以我也想更新我的代码。

 <div id="map" style="width: 100%; height: 550px"></div>

<script type="text/javascript" language="javascript">
<!--
function loadGoogleMapsAPI() {
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=ABQIAAAAyMh6cNobclm3PrugAcTTkRRV64WZ3bUzAPoCqIiq79wunMeoIRQemm_B8-GS77IHof0-AYwkueQQaQ&hl=nl&callback=loadMaps";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function loadMaps() {
    google.load("maps", "2", {"callback" : mapLoaded});
}

var gmarkers = [];

function mapLoaded() {
    var map = null;
    var geocoder = null;

    if (GBrowserIsCompatible()) {
        var labelContainer;
        var side_bar_html = "";

        function LabelControl() {  }

        LabelControl.prototype = new GControl();

        LabelControl.prototype.initialize = function(map) {
            labelContainer = document.createElement("div");
            labelContainer.style.overflow="auto";
            labelContainer.style.backgroundColor = "#ffffff";
            labelContainer.style.border = "1px solid black";
            labelContainer.style.height="350px";
            labelContainer.style.width="137px";
            labelContainer.style.paddingLeft="5px";

            map.getContainer().appendChild(labelContainer);
            return labelContainer;
        }

        LabelControl.prototype.getDefaultPosition = function() {
            return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 33));
        }

        var bounds = new GLatLngBounds();
        var map = new GMap2(document.getElementById("map"),{size:new GSize(screen.width-410,screen.height-300)});
        map.setCenter(new GLatLng(0,0), 1);
        map.setUIToDefault();
        map.addControl(new LabelControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());

        geocoder = new GClientGeocoder();

        var Tsize = new GSize(150, 150);
        map.addControl(new GOverviewMapControl(Tsize));

        showAddress("blsa bla<br />bla 46<br />1blabla RX blabla (Noordholland)<br />Nederland","Datum/ Tijd: 17 okt 2012, 19:38<br />Ordernummer: <a href=\"order.php?cart_order_id=121017-193856-6447\" class=\"txtLink\">121017-193856-6447</a><br />Status: Open (nieuwe order)<br />Bedrag: 1221.20","blabla 46,1741 rx schagen,Nederland","Mw blabla");
        showAddress("blabla<br />The Boathouse<br />blabla<br />blabla blablabla (Ablabla)<br />Verenigd Koninkrijk","Datum/ Tijd: 17 okt 2012, 09:47<br />Ordernummer: <a href=\"order.php?cart_order_id=121017-094729-7406\" class=\"txtLink\">121017-094729-7406</a><br />Status: Order verwerkt &amp; voltooid<br />Bedrag: 12121.40","blablabla,blabla,ab12 blabla,Verenigd Koninkrijk"," bla");
        showAddress("blabla blabla<br />blablabla 46<br />2323 RX Schagen (Noordholland)<br />Nederland","Datum/ Tijd: 16 okt 2012, 20:42<br />Ordernummer: <a href=\"order.php?cart_order_id=121016-203616-1862\" class=\"txtLink\">121016-203616-1862</a><br />Status: Open (nieuwe order)<br />Bedrag: 1212.40","blabla,blabla rx blabla,Nederland","Mw Rblabla");
    }

    function createMarker(point,html,html2,linkname) {
        // use a custom icon with letter A - Z
        var letter = String.fromCharCode("A".charCodeAt(0) + (gmarkers.length));
        var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
        myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif"
        myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif"

        var marker = new GMarker(point, {icon:myIcon});
        GEvent.addListener(marker, "click", function() {
            //marker.openInfoWindowHtml(html);
            marker.openInfoWindowTabsHtml([new GInfoWindowTab('Klant','<span class="tdText">'+html+'</span>'), new GInfoWindowTab('Bestelling','<span class="tdText">'+html2+'</span>')]);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker)
        // add a line to the side_bar html
        side_bar_html += '<table cellspacing="0" class="wp100"><tr class="aT"><td width="20"><b class="pageTitleSmall">'+letter+':<\/b></td><td><a href="javascript:myclick(' + (gmarkers.length-1) + ')" class="txtLinkSmall">' + linkname + '<\/a></td></tr></table>';
        labelContainer.innerHTML = side_bar_html;

        return marker;
    }

    function showAddress(customer,order,address,linkname) {
        if (geocoder) {
            geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        //alert(address + " not found");
                    } else {
                        map.checkResize();
                        var marker = createMarker(point,customer,order,linkname);
                        map.addOverlay(marker);

                        bounds.extend(point);

                        // ===== determine the zoom level from the bounds =====
                        map.setZoom(map.getBoundsZoomLevel(bounds));

                        // ===== determine the centre from the bounds ======
                        map.setCenter(bounds.getCenter());
                    }
                }
            );
        }
    }
}

// === This function picks up the click and opens the corresponding info window ===
function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
}

$(document).ready(function() {
    loadGoogleMapsAPI();
});
//-->
</script>
4

1 回答 1

1

这是一个很大的话题，不是我们可以在这里用几行来回答的。幸运的是，有一个完整的文档解释了您需要做什么： https ://developers.google.com/maps/articles/v2tov3

于 2013-03-27T07:58:57.233 回答