GoogleMap V3 图层

最新推荐文章于 2024-10-30 18:24:25 发布

ponlya

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量207

点赞数

分类专栏： maps 文章标签： javascript 数据库 ViewUI

本文链接：https://blog.csdn.net/ponlya/article/details/84436559

版权

maps 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

https://developers.google.com/maps/documentation/javascript/layers?hl=zh-CN
图层是地图上的对象，包含一个或多个单独项，但可作为一个整体进行操作。图层通常反映了您添加到地图上用于指定公共关联的对象集合。Maps API 会通过以下方法管理图层内对象的显示形式。
要在地图上添加图层，只需调用 setMap() 并向其传递要在其中显示图层的地图对象即可。类似地，要隐藏图层，只需调用 setMap() 并传递 null 即可。
Maps API 包含以下几种图层：
KmlLayer 对象，用于在 Maps API V3 图块叠加层中呈现 KML 和 GeoRSS 元素。
Google Maps API 支持采用 KML 和 GeoRSS 数据格式来显示地理信息。这些数据格式使用 KmlLayer 对象显示在地图上，其构造函数采用可公开访问的 KML 或 GeoRSS 文件的网址。

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(30.51667,114.31667); 
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

HeatmapLayer 对象，使用热图可视化技术来呈现地理数据。

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
  <script>
// Adding 500 Data Points
var map, pointarray, heatmap;

var taxiData = [
  new google.maps.LatLng(37.782551, -122.445368),
  new google.maps.LatLng(37.782745, -122.444586),
  new google.maps.LatLng(37.782842, -122.443688),
  new google.maps.LatLng(37.782919, -122.442815),
  new google.maps.LatLng(37.760556, -122.406495),
  new google.maps.LatLng(37.759732, -122.406484),
  new google.maps.LatLng(37.758910, -122.406228),
  new google.maps.LatLng(37.758182, -122.405695),
  new google.maps.LatLng(37.757676, -122.405118),
  new google.maps.LatLng(37.757039, -122.404346),
  new google.maps.LatLng(37.756335, -122.403719),
  new google.maps.LatLng(37.755503, -122.403406),
  new google.maps.LatLng(37.754665, -122.403242),
  new google.maps.LatLng(37.753837, -122.403172),
  new google.maps.LatLng(37.752986, -122.403112),
  new google.maps.LatLng(37.751266, -122.403355)
];

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(37.774546, -122.433523),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var pointArray = new google.maps.MVCArray(taxiData);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray
  });

  heatmap.setMap(map);
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.setOptions({
    gradient: heatmap.get('gradient') ? null : gradient
  });
}

function changeRadius() {
  heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}

function changeOpacity() {
  heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}

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

    </script>
  </head>

  <body>
    <div id="panel">
      <button οnclick="toggleHeatmap()">Toggle Heatmap</button>
      <button οnclick="changeGradient()">Change gradient</button>
      <button οnclick="changeRadius()">Change radius</button>
      <button οnclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map-canvas"></div>
  </body>

FusionTablesLayer 对象，用于呈现 Google Fusion Tables 中包含的数据。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script>
var map, layer;

function initialize() {
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: chicago,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

TrafficLayer 对象，用于呈现描述路况情况的图层和表示路况的叠加层。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

TransitLayer 对象，用于在地图上显示您所在城市的公交网络。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(51.501904,-0.115871);
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

WeatherLayer 和 CloudLayer 对象，可让您向地图添加天气预报和云图。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
 <script>
function initialize() {
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(49.265984,-123.127491),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var weatherLayer = new google.maps.weather.WeatherLayer({
    temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
  });
  weatherLayer.setMap(map);

  var cloudLayer = new google.maps.weather.CloudLayer();
  cloudLayer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

BicyclingLayer 对象，用于在公共图层中呈现自行车道的图层和/或自行车专用叠加层。默认情况下，在请求出行模式 BICYCLING 的路线时，系统会在 DirectionsRenderer 中返回该图层。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(42.3726399, -71.1096528);
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

PanoramioLayer 对象，用于添加 Panoramio 中的照片作为图层。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<style>
      #photo-panel {
        background: #fff;
        padding: 5px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 300px;
        max-height: 300px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script>
  <script>
function initialize() {
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(47.651743, -122.349243),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
  panoramioLayer.setMap(map);

  var photoPanel = document.getElementById('photo-panel');
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(photoPanel);

  google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
    var li = document.createElement('li');
    var link = document.createElement('a');
    link.innerHTML = photo.featureDetails.title + ': ' +
        photo.featureDetails.author;
    link.setAttribute('href', photo.featureDetails.url);
    li.appendChild(link);
    photoPanel.appendChild(li);
    photoPanel.style.display = 'block';
  });
}

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

    </script>
  </head>
  <body>
    <ul id="photo-panel">
      <li><strong>Photos clicked</strong></li>
    </ul>
    <div id="map-canvas"></div>
  </body>

    DemographicsLayer 对象，用于呈现美国的受众特征信息作为图层，仅供 Google Maps API for Business 客户使用。该对象包含在 visualization 库内。

热图图层
    热图图层可在客户端呈现热图。热图是一种可视化效果，用于描绘各地理点的数据强度。启用热图图层后，地图上方就会显示一个带颜色的叠加层。默认情况下，强度较高的地区会显示为红色，而强度较低的地区会显示为绿色。
    用之制作比如公交路线及拥堵情况。
Google Fusion Table 是一种数据库表格，其中每行都包含特定地图项的相关数据；对于地理数据，Google Fusion Table 中的每行还另外包含位置数据，以存储地图项的位置信息。