gpt4 book ai didi

google-maps - 在 google maps API v3 中切换多个 KML/KML 图层

转载 作者:行者123 更新时间:2023-12-04 16:36:56 26 4
gpt4 key购买 nike

我一直想在谷歌地图中切换 KML 图层。我已经将它设置为只显示一层而没有任何切换按钮。我在网上关注了很多例子,但似乎没有一个有效。到目前为止我设置的代码如下:

<html>
<head>
<script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
{preserveViewport: true});
var map;

function initialize() {
var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}

function toggleLayers(i)
{
if(layers[i].getmap()==null){
kmlLayer01.setMap(null);
}
else{
layers[i].setMap(null);
}
}


</script> </head>
<body onload="initialize()">
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
<div id="map_canvas"></div>
</body>
</html>

请帮忙!

最佳答案

  • 发布的代码不包括 API,这是缺失的:
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  • 有几个错别字:
  • javascript 区分大小写 getmap 不是有效的方法名,应该是 getMap。
  • kmlLayer01 未定义,可能应该是 layers[i]
          <html>
    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    var layers=[];

    layers[0] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
    {preserveViewport: true});

    layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
    {preserveViewport: true});
    var map;

    function initialize() {
    var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
    var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }

    function toggleLayers(i)
    {

    if(layers[i].getMap()==null) {
    layers[i].setMap(map);
    }
    else {
    layers[i].setMap(null);
    }
    document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
    }


    </script>
    </head>
    <body onload="initialize()">
    Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
    Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
    <div id="map_canvas" style="height:500px; width:600px;"></div>
    <div id="status"></div>
    </body>
    </html>

  • working example
    代码片段:

    var layers = [];

    layers[0] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml",
    /*'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml', original KML no longer available */
    {
    preserveViewport: true
    });

    layers[1] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml",
    /* 'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz', original KML no longer available */
    {
    preserveViewport: true
    });
    var map;

    function initialize() {
    var latlng = new google.maps.LatLng(38, -112 /*52.5028910, 13.41032740 */ );
    var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function toggleLayers(i) {

    if (layers[i].getMap() == null) {
    layers[i].setMap(map);
    } else {
    layers[i].setMap(null);
    }
    document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    Layer1
    <input type="checkbox" id="layer_01" onclick="toggleLayers(0);" />Layer2
    <input type="checkbox" id="layer_02" onclick="toggleLayers(1);" />
    <div id="map_canvas" style="height:500px; width:600px;"></div>
    <div id="status"></div>

    关于google-maps - 在 google maps API v3 中切换多个 KML/KML 图层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17409598/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com