`
ponlya
  • 浏览: 164263 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 图层

    博客分类：
  • maps
 
阅读更多

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 中的每行还另外包含位置数据，以存储地图项的位置信息。

分享到：
| GoogleMap V3 叠加层 复杂图形用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本，主要针对Web开发，提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API，即便在无法访问互联网的情况...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中提供了多种图层，例如自行车图层、FusionTables 图层、KML 图层等。开发者可以使用这些图层来在地图上显示不同的信息。 十一、街景视图 街景视图是谷歌地图 Google Map API V3 中的...

    Google Map V3 API

    **Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口，它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本，提供了更多的功能、更好的性能以及更...

    google map api v3源码

    由于这个压缩包名为"WebMap"，里面可能包含了一个简单的web应用，展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码，了解上述知识点的实际应用，并进一步扩展自己的地图应用开发...

    Google Map v3 官方实例

    5. **图层（Layers）**：Google Maps API v3支持多种图层，如卫星图、地形图、交通流量图等，可以通过设置`mapTypeId`属性切换。 6. **覆盖物（Overlays）**：除了标记，还可以创建其他类型的覆盖物，如多边形、...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图，包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    GoogleMap V3 样式

    **GoogleMap V3 样式详解** 在Web开发中，Google Maps API V3是一个强大的工具，它允许开发者在网页上嵌入交互式的地图，并进行高度自定义。本篇将深入探讨如何利用Google Maps API V3来创建和管理地图的样式，以...

    googleMap V3 中文API

    谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用，包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

    Google Map api V3 (3.9.12)的离线开发包

    4. **图层与服务**：Google Map API V3支持各种图层，如卫星图、地形图等，还可以添加自定义图层。此外，还有地理编码、路线规划、街景等服务。 ```javascript var hybridMapType = new google.maps.HybridMapType()...

    google map jsv3 示例

    9. **地图样式（Map Styles）**：你可以自定义地图的外观，比如改变颜色、隐藏某些图层、调整标签等，使用`styles`配置项或` StyledMapType`接口。 10. **响应式设计**：考虑到不同设备和屏幕尺寸，jsv3 API支持...

    Google map 谷歌地图 Google地图 V3 第三版

    **谷歌地图API V3详解** 谷歌地图API（Google Maps API）是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新，旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将...

    Google Map Api

    最新版的Google Map API是V3，它是一个基于JavaScript的API，具有高度可定制性和灵活性。 在Google Map API V3中，开发者可以实现以下主要功能： 1. **地图嵌入**：通过简单的HTML和JavaScript代码，可以在网页上...

    googlemap js v3 gmap

    谷歌地图JavaScript API V3（简称gmap）是Google提供的一款强大的地图开发工具，它允许开发者在网页上嵌入交互式地图，实现各种定制化的地图功能。这个压缩包文件包含了一系列有关gmap的教程章节，从基础到进阶，...

    google api v3 实例

    5. **图层（Layers）**：Google Maps V3支持多种图层，如地形图、卫星图、交通图等，可以通过切换图层来改变地图的显示样式。 6. **路径规划**：通过`google.maps.DirectionsService`和`google.maps....

    google Map api v3学习例子

    通过这个"google Map api v3学习例子"，你可以逐步掌握如何利用Google Maps API V3构建交互式地图应用，包括添加标记、处理事件、展示叠加层等功能。实践中不断探索，你会发现Google Maps API V3的强大和灵活性，能...

    Google Maps API V3 中文参考文档(JavaScript)

    在 Google Maps API V3 中，Map 是地图的核心组件，提供了多种配置选项和事件监听器。开发者可以使用 MapOptions 对象来配置地图的基本属性，如中心点、缩放级别、地图类型等。同时，MapTypeId 对象提供了多种地图...

    Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

    在Google Maps API V3中，我们可以实现的功能包括但不限于：定位、路线规划、地理编码、标记、信息窗口、覆盖物、图层控制、事件监听等。 首先，让我们了解一下基础的集成步骤。要在网页中嵌入Google Maps，你需要...

    Google_Maps_API_V3.docx

    此外，V3 API还提供了丰富的类和接口，如`Map`、`Marker`、`Polyline`、`InfoWindow`等，用于创建、操作和显示地图元素。还有`Geocoder`服务用于地理编码和反编码，`DirectionsRenderer`和`DirectionsService`用于...

    GoogleMapAPIV3离线demo

    Google Map API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个离线示例可能包含了一整套无需互联网连接即可运行的代码和资源，帮助开发者了解和学习如何在自己的应用程序中...

    Google_map_JavaScript_API_V3

    **谷歌地图JavaScript API V3详解** 谷歌地图JavaScript API V3是谷歌提供的用于在网页中集成交互式地图的服务。这个API允许开发者通过JavaScript编程语言来控制和定制地图的显示、添加标记、绘制形状、处理事件...

Magicbox
Global site tag (gtag.js) - Google Analytics