2012-04-20

Google Maps API 實際應用使用.net for VB

大家都知道,Google Map是個很強大而且很典型雲端應用

當然Google也放出了API來,讓開發人員能夠有更好的應用

廢話不多說,下面為您開始實作、運用Google Maps API




過去的要用到Google Maps API需要去註冊key,有key才能用google map

第二版開始改變了這樣的作業模式,只要載入JavaScript API就可以了

<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>&nbsp;</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

GO

number:順序號
name:標記中文名稱
website:連結網址
image:縮圖檔名
longitude:經度
latitude:緯度
type:群組

圖檔資料夾內圖檔名稱:(mark.jpg為標記圖示、其他為點標記後的縮圖)

執行後畫面:
下拉選項:
選擇完也已撈出資料給前端就會出現地圖了
按下顯示出現標記
點選標記
點選完標記後再其他地方再點一下就會出現海拔高度

後記:
           其實Google Maps API還有其他的應用,只是因為工作上有用到,所以就po我用到的部份上來,有需要的人可以參考一下,其他還有很多請到開發人員指南去了解,以我用的感覺來說,以表列的方式和用google map來看當然是用Google Map來的舒服一些,不過Google Map也有一些限制,最大的限制就是必須是免費的,也就是不能需要付費才能看到此地圖,這個可能是最需要注意的,如果要在付費網站使用也不是沒辦法,可以用

Google Maps API for Business,也就是付費版,一年1萬塊美金的使用費。

沒有留言:

張貼留言

您的寶貴建議是我前進的動力!