谷歌地图与复选框图层

时间:2014-04-09 10:51:27

标签: javascript jquery google-maps

我无法找到带有复选框图层的Google地图代码 但是当我选择复选框错误抓取时,我需要执行类似that但我的图层

的操作
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

我不正确的是什么?我出错了什么? 附:对不起我的英文

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>

1 个答案:

答案 0 :(得分:1)

尝试查看以下代码是否有效,如果不考虑更改“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>