最近因為專案需求需要玩一下google maps的API，看到google maps有提供weather layer可以用，於是就拿來試一下。
沒用過的話先到 google maps api 申請一個 API Key。
因為 weather 的 library 不會一開始就引入，所以要在include的時候要指定要引入 weather layer 的 library。
程式庫
其他提供的圖層資源
include 的 code會像這樣
- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUT_API_KEY&libraries=weather&sensor=true">
- </script>
然後修改一下範例的code就可以使用了。
- function initialize() {
- var mapOptions = {
- zoom: 8,
- center: new google.maps.LatLng(24,121.15),
- 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.CELSIUS
- });
- weatherLayer.setMap(map);
- var cloudLayer = new google.maps.weather.CloudLayer();
- cloudLayer.setMap(map);
- }
- google.maps.event.addDomListener(window, 'load', initialize);
路況圖層
- function initialize() {
- var myLatlng = new google.maps.LatLng(25.05,121.53);
- var mapOptions = {
- zoom: 14,
- 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);
- }
大眾運輸工具
- function initialize() {
- var myLatlng = new google.maps.LatLng(25.05,121.53);
- var mapOptions = {
- zoom: 14,
- 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);
![[Vue.js] 使用 vue leaflet 來製作互動地圖- 基本安裝](/assets/upload/1583563899683_0.jpg)
