Question

我正在使用Google Maps API。

我正在使用jQuery加载KML文件和JSON文件。

KML文件是多伦多的自行车路线，JSON文件显示自行车共享站位于多伦多的标记。

当两者都被加载时，自行车路线不会显示......我认为这是因为这两个文件太大了（但是他们自己装得很好）。

无论如何，我想用JSON文件加载页面，然后有一个按钮，当点击时删除标记并加载KML文件。另一个按钮将删除KML文件并加载标记。

我找不到办法做到这一点。

以下是代码：

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript"           src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDr2ZlJyFHjsjjItTPK7_bvRiw_YBchXW4">
    </script><link rel="stylesheet" type="text/css" href="http://www.richardbeardwood.com/stylesassign3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script type="text/javascript">


    function initialize() {

        var mapOptions = {
          center: new google.maps.LatLng(43.663112,-79.403468),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);



   $.getJSON("http://api.citybik.es/bixi-toronto.json", function(json1) {

     var infoWindow = new google.maps.InfoWindow();


     $.each(json1, function(key, data) {

        var lat = data.lat; 
        var newLat = lat.toString().match(/.{2}/g).join('.');
        var nextLat = newLat.split('.');
        var finLat = nextLat.shift() + '.' + nextLat.join('');

        var lng = data.lng; 
        var newLng = lng.toString().match(/.{3}/g).join('.');
        var nextLng = newLng.split('.');
        var finLng = nextLng.shift() + '.' + nextLng.join('');

        var latLng = new google.maps.LatLng(finLat, finLng);

  // Creating a marker and putting it on the map
  //var imagebike = 'http://www.richardbeardwood.com/bikes_maps_marker.png';
       var marker = new google.maps.Marker({
            position: latLng,
           icon: 'http://maps.google.com/mapfiles/kml/pal3/icon53.png'
       });  
       var bikeLayer = new google.maps.KmlLayer({
           url: 'http://www.richardbeardwood.com/TorontoCyclingMap.kml.xml'
      });
          bikeLayer.setMap(map);

    // Attaching a click event to the current marker
    google.maps.event.addListener(marker, "click", function(e) {
      var gettime = new Date(data.timestamp);
      var time = gettime.toString();
        infoWindow.setContent('<div id="iw-container"><div class="iw-title">' + data.name + '</div><div class="iw-content"><p><img src="http://www.richardbeardwood.com/Bicyle-Symbolgreen.jpg" height="115" width="114"></p><p> As of ' + time + ' at this location there are:<br><br><strong><span class="large">Available docks: ' + data.free + '<br><br>Available bikes: ' + data.bikes + '</span></strong></div></div>');
            infoWindow.open(map, marker);
      });
      marker.setMap(map);
    });
  });
}

    </script>
    <script>
function clearMarkers() {
bikeLayer.setMap(null);
}
  </script>
   </head>

谷歌地图切换kml和json图层

0 个答案: