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/)
Powered by Discuz! X3.2
抗ddos
|
防ddos
|
防禦ddos
|
防ddos主機
|
天堂美工
| 設計
抗ddos主機
|
抗ddos
|
抗ddos主機
|
抗攻擊論壇
|
天堂自動贊助
|
免費論壇
|
天堂私服
|
天堂123
|
台灣高抗ddos遊戲主機|無限防禦主機|抗攻擊主機|IP不黑洞-硬主機
|
抗ddos
|
虛擬主機
|
實體主機
|
vps
|
網域註冊
|
抗攻擊遊戲主機
|
ddos
|
自動推文系統
|