|
1.首先要去google API 新增一個專案並開通『Google Maps JavaScript API』
申請網址: https://console.developers.google.com/?hl=zh-tw
2. 新增一個憑證並且將 KEY 記下就可以使用囉
使用範例:
1.建立一個基本的 google map- <div id="map"></div>
- <script>
- function initMap() {
- // Create a map object and specify the DOM element for display.
- var map = new google.maps.Map(document.getElementById('map'), {
- center: {lat: -34.397, lng: 150.644},
- scrollwheel: false,
- zoom: 8
- });
- }
- </script>
- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
- async defer></script>
複製代碼 預覽畫面
2.建立信息座標
- var contentString = '<div id="content">你要輸入的資訊</div>';
- var infowindow = new google.maps.InfoWindow({
- content: contentString
- });
- var marker = new google.maps.Marker({
- position: uluru,
- map: map,
- title: 'Uluru (Ayers Rock)'
- });
- marker.addListener('click', function() {
- infowindow.open(map, marker);
- });
複製代碼 預覽畫面
3.在地圖上畫線條 - var flightPlanCoordinates = [
- {lat: 37.772, lng: -122.214},
- {lat: 21.291, lng: -157.821},
- {lat: -18.142, lng: 178.431},
- {lat: -27.467, lng: 153.027}
- ];
- var flightPath = new google.maps.Polyline({
- path: flightPlanCoordinates,
- geodesic: true,
- strokeColor: '#FF0000',
- strokeOpacity: 1.0,
- strokeWeight: 2
- });
- flightPath.setMap(map);
複製代碼
預覽畫面
|
本帖子中包含更多資源
您需要 登錄 才可以下載或查看,沒有帳號?立即註冊
x
|