0

api googleを使用したマップの次のコードがあります。いくつかのHTMLエディターでコードをテストしましたが、完全に機能しますが、Webページにアップロードすると機能しません。マップはすべて、海のランダムなポイントにズームインして表示されます。Joomla 1.5.20で記事を作成し、コードを貼り付けます。プレビューには表示されますが、Webページには表示されません。フィルタリングを無効にして、エディターを使用しませんが、それでも機能しません。助けてくれてありがとう。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBInlv7FuwtKGhzBP0oISDoB2Iu79HNrPU&sensor=false">
    </script>
    <script type="text/javascript">



var map;

// lets define some vars to make things easier later



var kml = {
    a: {
        name: "Productor",
        url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4"
    },
    b: {
        name: "A&S",
        url: "https://maps.google.hn/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=200984447026903306654.0004c94bac74cf2304c71"
    }
// keep adding more if ye like 
};

// initialize our goo
function initializeMap() {
    var options = {
        center: new google.maps.LatLng(13.324182,-87.080071),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=5&hl=es&ie=UTF8&oe=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94bc3bce6f638aa1');
        ctaLayer.setMap(map);

var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94ec7e838242b67d');
        ctaLayer.setMap(map);

    createTogglers();
};

 google.maps.event.addDomListener(window, 'load', initializeMap);




// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) {

    if (checked) {

        var layer = new google.maps.KmlLayer(kml[id].url, {
            preserveViewport: true,
            suppressInfoWindows: true 
        });

 google.maps.event.addListener(layer, 'click', function(kmlEvent) {
          var text = kmlEvent.featureData.description;
          showInContentWindow(text);
        });

        function showInContentWindow(text) {
          var sidediv = document.getElementById('content_window');
          sidediv.innerHTML = text;
        }

        // store kml as obj
        kml[id].obj = layer;
        kml[id].obj.setMap(map);
    }
    else {
        kml[id].obj.setMap(null);
        delete kml[id].obj;
    }

};


// create the controls dynamically because it's easier, really
function createTogglers() {

    var html = "<form><ul>";
    for (var prop in kml) {
        html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
        " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
        kml[prop].name + "<\/li>";
    }
    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
    "Limpiar el Mapa<\/a><\/li>" + 
    "<\/ul><\/form>";

    document.getElementById("toggle_box").innerHTML = html;
};

// easy way to remove all objects
function removeAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(null);
            delete kml[prop].obj;
        }

    }
};


// Append Class on Select
function highlight(box, listitem) {
    var selected = 'selected';
    var normal = 'normal';
    document.getElementById(listitem).className = (box.checked ? selected: normal);
};



</script>

<style type="text/css">
.selected { font-weight: bold; }
</style>

</head>
<body>
<div id="map_canvas" style="width: 80%; height: 400px; float:left"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 640px; padding: 10px; background: #fff; z-index: 5; "></div>
<div id="content_window" style="width:10%; height:10%; float:left"></div>
</body>
</html>
4

1 に答える 1

0

この問題は、ドロップボックスを使用して Google マップに挿入された KML ファイルをホストすることで解決されました。

于 2012-09-13T05:08:25.127 に答える