GameHost綜合論壇

標題: 【GOOGLE MAP API 基本教學】 [打印本頁]

作者: admin 時間: 2016-12-24 20:53
標題: 【GOOGLE MAP API 基本教學】
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>

複製代碼

預覽畫面[attach]136[/attach]

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);
});

複製代碼

預覽畫面[attach]135[/attach]

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);

複製代碼

預覽畫面
[attach]134[/attach]

歡迎光臨 GameHost綜合論壇 (https://www.gamehost.cc/bbs/)