當然Google也放出了API來，讓開發人員能夠有更好的應用
廢話不多說，下面為您開始實作、運用Google Maps API
一定要知道的教學網頁：Google Maps Javascript API 第 3 版 - 開發人員指南
過去的要用到Google Maps API需要去註冊key，有key才能用google map
第二版開始改變了這樣的作業模式，只要載入JavaScript API就可以了
PS：v=3是版本、sensor = false是應用程式是否有使用感應器(例如GPS定位器)來判斷使用者的位置。
前端HTML程式碼：
後端VB程式碼：
PS：資料由MS SQL資料庫撈出來後丟給前端JavaScript，用串字串的方式給
SQL Table Schema：
name：標記中文名稱
website：連結網址
image：縮圖檔名
longitude：經度
latitude：緯度
type：群組
圖檔資料夾內圖檔名稱：(mark.jpg為標記圖示、其他為點標記後的縮圖)
執行後畫面：
下拉選項：
選擇完也已撈出資料給前端就會出現地圖了
按下顯示出現標記
點選標記
點選完標記後再其他地方再點一下就會出現海拔高度
後記：
其實Google Maps API還有其他的應用，只是因為工作上有用到，所以就po我用到的部份上來，有需要的人可以參考一下，其他還有很多請到開發人員指南去了解，以我用的感覺來說，以表列的方式和用google map來看當然是用Google Map來的舒服一些，不過Google Map也有一些限制，最大的限制就是必須是免費的，也就是不能需要付費才能看到此地圖，這個可能是最需要注意的，如果要在付費網站使用也不是沒辦法，可以用
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
PS：v=3是版本、sensor = false是應用程式是否有使用感應器(例如GPS定位器)來判斷使用者的位置。
前端HTML程式碼：
<body onload="initialize()"> <form id="form1" runat="server"> <table id ="control"> <tr> <td style="vertical-align: top"> <table> <tr> <td class="style1" colspan="2" style="text-align: center">崩塌地重建工程</td> <td class="style1" colspan="2" style="text-align: center">公司位置</td> </tr> <tr> <td>marker1:</td> <td>台中市坪頂巷崩塌地修復工程</td> <td>marker3:</td> <td>XX工業大甲廠區</td> </tr> <tr> <td>marker2:</td> <td>苗栗縣開善寺前崩塌地復育工程</td> <td>marker4:</td> <td>XX工業中港廠區</td> </tr> <tr> <td> </td> <td> <asp:DropDownList ID="DropDownList1" runat="server" Width="205px" AutoPostBack="True"> <asp:ListItem Value="0">請選擇</asp:ListItem> <asp:ListItem Value="1">崩塌地重建工程</asp:ListItem> <asp:ListItem Value="2">公司位置</asp:ListItem> </asp:DropDownList> </td> <td style="text-align: right"> <input id="Button1" type="button" value="顯示" onclick="drop()" /></td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="注意：" ForeColor="Red"></asp:Label> </td> <td colspan="3"> <asp:Label ID="Label1" runat="server" Text="1.海拔高度為取小數點兩位四捨五入" ForeColor="Red"></asp:Label> </td> </tr> </table> </td> <td style="vertical-align: top"> <div id ="map_canvas" style="height: 700px; width: 850px"></div> </td> </tr> </table> </form> </body>JavaScript程式碼：
var berlin = new google.maps.LatLng(24.2386197, 120.5084257);
var neighborhoods = <%=sNeighborhoods %>;
var Content = <%=sName %>;
var Link = <%=sLink %>;
var MarkerImage = <%=sImage %>;
var iterator = 0;
var markersArray = [];
var map;
var infowindow;
var ge;
//MapTypeId.ROADMAP 會顯示預設道路地圖檢視畫面
//MapTypeId.SATELLITE 會顯示「Google 地球」衛星影像
//MapTypeId.HYBRID 會顯示一般檢視和衛星檢視的混合畫面
//MapTypeId.TERRAIN 會根據地形資訊顯示實際地圖
function initialize() {
var mapOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: berlin
};
//map
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
// 新增一個 ElevationService(海拔高度請求伺服器)
elevator = new google.maps.ElevationService();
//點選地圖非標記部份，訊息框就會關閉
//google.maps.event.addListener(map, 'click', function () {
// infowindow.close();
//});
//點選地圖就會查詢海拔高度
google.maps.event.addListener(map, 'click', getElevation);
}
function getElevation(event) {
var locations = [];
// 檢索點擊的位置，推動它在陣列上
var clickedLocation = event.latLng;
locations.push(clickedLocation);
// 創建一個LocationElevationRequest對象，使用陣列的一個值
var positionalRequest = {
'locations': locations
}
// 發起定位請求
elevator.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// 檢索結果
if (results[0]) {
// 打開一個信息窗口，顯示海拔在點擊的位置
infowindow.setContent("<p>在這一點上海拔 <font color='red'>" + results[0].elevation.toFixed(2) + "</font> 公尺.</p>");
infowindow.setPosition(clickedLocation);
infowindow.open(map);
} else {
alert("沒有找到結果");
}
} else {
alert("海拔服務失敗，因為: " + status);
}
});
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
debugger;
setTimeout(function () {
addMarker();
}, i * 200);
}
}
function addMarker() {
//markers.push(new google.maps.Marker({
// position: neighborhoods[iterator],
// map: map,
// draggable: false,
// animation: google.maps.Animation.DROP
//}));
var markernumber = iterator + 1;
var image = 'images/mark.jpg';
marker = new google.maps.Marker({
map: map,
title: 'maker' + markernumber,
position: neighborhoods[iterator],
draggable: false,
animation: google.maps.Animation.DROP,
icon: image
});
markersArray.push(marker);
(function (iterator, marker) {
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent("<table><tr><td><a href='" + Link[iterator] + "' target=_blank><img height='200px' width='500px' src='images/" + MarkerImage[iterator] + ".jpg'/></a></<td></tr><tr><td style='text-align: center;'><a href='" + Link[iterator] + "' target=_blank>" + Content[iterator] + "</a></<td></tr></table>");
infowindow.open(map, marker);
});
})(iterator, marker);
iterator++;
}
後端VB程式碼：
Imports System.Data.SqlClient
Public Class index
Inherits System.Web.UI.Page
Public Conn As SqlClient.SqlConnection = New SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings("masterConnectionString").ToString())
Public sName, sNeighborhoods, sLink, sImage, sLatitude, sLongitude As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
'Open(DB連線)
If (Conn.State = ConnectionState.Closed) Then
Conn.Open()
End If
'SQL Command
Dim command As SqlCommand = New SqlCommand("select name,website,image,longitude,latitude from GoogleMapAPI where type =" & DropDownList1.SelectedValue & "", Conn)
Dim GoogleMap_reader As SqlDataReader = command.ExecuteReader()
Dim int As Integer = 0
If GoogleMap_reader.HasRows Then
'用串字串的方式，串給前端JavaScript的Google Maps API變數用
sName = "[" '名稱
sNeighborhoods = "[" '經緯度座標
sLink = "[" '網址
sImage = "[" '圖片檔名
sLatitude = "[" '緯度
sLongitude = "[" '經度
Do While GoogleMap_reader.Read()
If (int = 0) Then
sName += "'" & GoogleMap_reader.GetString(0) & "'"
sNeighborhoods += "new google.maps.LatLng(" & GoogleMap_reader.GetDecimal(3) & "," & GoogleMap_reader.GetDecimal(4) & ")"
sLink += "'" & GoogleMap_reader.GetString(1) & "'"
sImage += "'" & GoogleMap_reader.GetString(2) & "'"
sLatitude += "'" & GoogleMap_reader.GetDecimal(3) & "'"
sLongitude += "'" & GoogleMap_reader.GetDecimal(4) & "'"
Else
sName += ",'" & GoogleMap_reader.GetString(0) & "'"
sNeighborhoods += ",new google.maps.LatLng(" & GoogleMap_reader.GetDecimal(3) & "," & GoogleMap_reader.GetDecimal(4) & ")"
sLink += ",'" & GoogleMap_reader.GetString(1) & "'"
sImage += ",'" & GoogleMap_reader.GetString(2) & "'"
sLatitude += ",'" & GoogleMap_reader.GetDecimal(3) & "'"
sLongitude += ",'" & GoogleMap_reader.GetDecimal(4) & "'"
End If
int += 1
Loop
sName += "]"
sNeighborhoods += "]"
sLink += "]"
sImage += "]"
sLatitude += "]"
sLongitude += "]"
End If
If (Conn.State = ConnectionState.Open) Then
Conn.Close()
Conn.Dispose() '---- 一開始宣告有用到 New的,最後必須以 .Dispose()結束
End If
End Sub
End Class
PS：資料由MS SQL資料庫撈出來後丟給前端JavaScript，用串字串的方式給
SQL Table Schema：
USE [master] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[GoogleMapAPI]( [number] [int] IDENTITY(1,1) NOT NULL, [name] [varchar](50) NULL, [website] [varchar](50) NULL, [image] [varchar](50) NULL, [longitude] [decimal](18, 8) NULL, [latitude] [decimal](18, 8) NULL, [type] [int] NULL, CONSTRAINT [PK_GoogleMapAPI] PRIMARY KEY CLUSTERED ( [number] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET ANSI_PADDING OFF GOnumber：順序號
name：標記中文名稱
website：連結網址
image：縮圖檔名
longitude：經度
latitude：緯度
type：群組
圖檔資料夾內圖檔名稱：(mark.jpg為標記圖示、其他為點標記後的縮圖)
執行後畫面：
後記：
其實Google Maps API還有其他的應用，只是因為工作上有用到，所以就po我用到的部份上來，有需要的人可以參考一下，其他還有很多請到開發人員指南去了解，以我用的感覺來說，以表列的方式和用google map來看當然是用Google Map來的舒服一些，不過Google Map也有一些限制，最大的限制就是必須是免費的，也就是不能需要付費才能看到此地圖，這個可能是最需要注意的，如果要在付費網站使用也不是沒辦法，可以用
沒有留言:
張貼留言
您的寶貴建議是我前進的動力!