如何制作包含地理位置和KML图层的Google Map(使用Javascript API v3)?我只能得到一个或另一个

时间:2012-03-03 14:48:15

标签: google-maps google-maps-api-3

以下代码是我一直在尝试的,但我只能得到一个或另一个我无法使用geolocation来处理kml图层。我更改了地图和kml图层的顺序,它只显示代码中的最后一个。这是我的例子:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">

  var initialLocation;
  var siberia = new google.maps.LatLng(60, 105);
  var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
  var browserSupportFlag =  new Boolean();
  var map;
  var infowindow = new google.maps.InfoWindow();

  function initialize() {
    var myOptions = {
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
var georssLayer = new google.maps.KmlLayer('http://mymedicinalgarden.org/kml/everything.kml');
georssLayer.setMap(map);


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



    // Try W3C Geolocation method (Preferred)
    if(navigator.geolocation) {
      browserSupportFlag = true;
      navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        contentString = "";
        map.setCenter(initialLocation);
        infowindow.setContent(contentString);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }, function() {
        handleNoGeolocation(browserSupportFlag);
      });
    } else if (google.gears) {
      // Try Google Gears Geolocation
      browserSupportFlag = true;
      var geo = google.gears.factory.create('beta.geolocation');
      geo.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
        contentString = "";
        map.setCenter(initialLocation);
        infowindow.setContent(contentString);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }, function() {
        handleNoGeolocation(browserSupportFlag);
      });
    } else {
      // Browser doesn't support Geolocation
      browserSupportFlag = false;
      handleNoGeolocation(browserSupportFlag);
    }
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      initialLocation = newyork;
      contentString = "Error: The Geolocation service failed.";
    } else {
      initialLocation = siberia;
      contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
    }
    map.setCenter(initialLocation);
    infowindow.setContent(contentString);
    infowindow.setPosition(initialLocation);
    infowindow.open(map);
  }
  </script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

显示的地图仅显示最后一个:

var georssLayer = new google.maps.KmlLayer('http://mymedicinalgarden.org/kml/everything.kml');
georssLayer.setMap(map);

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

除了使用地理位置之外,我确实需要KML图层。我知道有一种方法可以使用正确的语法,但是经过数小时的研究和反复试验,解决方案就让我失望了。请帮忙

1 个答案:

答案 0 :(得分:1)

您应该先设置地图。

然后在地图上加载kml

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

var georssLayer = new google.maps.KmlLayer('http://example.org/kml/everything.kml');
georssLayer.setMap(map);