繁体   English   中英

带有复选框图层的Google地图

[英]google maps with checkbox layers

我找不到带有复选框图层的Google Maps代码,但是当我选择复选框Bug爬网时,我需要执行类似的操作但是需要使用图层

toggleLayers(0) [setMap([object Object]] returns status: undefined
toggleLayers(0) [setMap(null] returns status: INVALID_REQUEST
toggleLayers(1) [setMap([object Object]] returns status: undefined
toggleLayers(1) [setMap(null] returns status: undefined

我没有改正什么,我怎么了? PS对不起我的英语

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

var layers=[];

layers[0] = new  google.maps.KmlLayer('ban.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 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>";
}

<body onload="initialize()">
Parish boundary line <input type="checkbox" id="layer100" onclick="toggleLayer(100)"  checked><br /> 
Letterbox locations and results <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked><br />
Landscape challenges <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked><br />
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>

尝试查看下面的代码是否有效,如果不考虑更改您的“ ban.kml”文件的网址,我认为这可能是原因,为了让Google提取您的kml文件,它需要具有Http://

请尝试使用此版本的代码,注意您将需要更改坐标和API密钥;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPI        "></script>
 <script type="text/javascript" src="~/Scripts/test.js"></script>
 <script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('ban.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(-23.670035, 27.536779);
var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeIds: google.maps.MapTypeId.SATELLITE
}
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()">
letterbox locations <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
landscape locations <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/> 
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>
</body>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM