javascript不会使用KML图层在Google地图上显示用户的当前位置?

时间:2014-03-22 21:34:15

标签: javascript google-maps kml

我正在尝试使用javascript加载KML文件,并且我试图在用户当前位置的地图上放置一个标记。但是,如果我插入检查地理位置(当前位置)代码,代码工作正常?如何在KML图层地图上添加当前位置。

   function initialize() {
      var chicago = new google.maps.LatLng(49.051078,-122.314221);
      var mapOptions = {
        zoom: 11,
        center: chicago
      }

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

          var infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: 'Location found using HTML5.'
          });

          map.setCenter(pos);
        }, function() {
          handleNoGeolocation(true);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
    }

    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
      }

      var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
      };

      var infowindow = new google.maps.InfoWindow(options);
      map.setCenter(options.position);
    }


      var ctaLayer = new google.maps.KmlLayer({
        url: 'https://dl.dropboxusercontent.com/u/143598220/38EndsleighCrescent.kml'


      });
      ctaLayer.setMap(map);
    }



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

1 个答案:

答案 0 :(得分:1)

这对我有用。修复了你的javascript错误,使地图全局化,在KmlLayer上使用preserveViewport来防止地图以图层为中心。

// Declaring the map as a global variable
var map;
function initialize() {
  var chicago = new google.maps.LatLng(49.051078,-122.314221);
  var mapOptions = {
    zoom: 11,
    center: chicago
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://dl.dropboxusercontent.com/u/143598220/38EndsleighCrescent.kml',
    preserveViewport: true


  });
  ctaLayer.setMap(map);

  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}


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