GoogleMap V3 图层

Waittingforyou

2013-05-29

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 onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="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 中的每行还另外包含位置数据，以存储地图项的位置信息。

maps api

安科网

GoogleMap V3 图层

Waittingforyou

Waittingforyou

相关推荐

go语言3 数组, 切片, Maps

hadoop自带性能测试

google经纬度互转

苹果为iPhone6及以下的设备发布了iOS 12.4.2

Mac地图构建软件Spot Maps

Google Maps Android API V2使用及问题解决

在本机 Android 应用程序中载入 Google Maps API 网站

jsonuntil

【原】前端技术的发展

google map 得到用户地理位置信息

源码映射

Ibatis学习例子

谷歌服务：Google Maps JavaScript API

Sass基础--变量与导入

Google Maps JavaScript API V3常用方法

Google Javascript V3地图展示

WebPack+React.Js+BootStrap 实现进制转换工具

最新google maps api key生成方式

ibatis下insert、update、delete操作单元测试通过，发布到tomcat下执行失败

Go语言入门教程之Arrays、Slices、Maps、Range操作简明总结

Waittingforyou