碼上歡樂
相關內容    簡體    繁體

C#的百度地圖開發(四)前端顯示與定位

本文轉載自   查看原文   2015-06-08 09:14   3703 

有了這些定位信息，那要如何在前端的頁面上顯示出來呢？這需要用到百度地圖的JavaScript的API。下面是示例代碼。

前端代碼

 

[html]  view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5.   
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head id="Head1" runat="server">  
  8.     <title>地圖</title>  
  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  10.     <script src="/js/map.js"></script>  
  11.     <script src="/js/jquery.js"></script>  
  12.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXX"></script>  
  13. </head>  
  14. <body>  
  15.     <div id="normal_map"></div>  
  16.     <input type="hidden" runat="server" id="HiddenCoord" />  
  17.     <input type="hidden" runat="server" id="HiddenAddress" />  
  18. </body>  
  19. </html>  
  20. <script type="text/javascript">  
  21.     $(document).ready(function () {  
  22.         var w = $(window).width();  
  23.         var h = $(document).height();  
  24.         var coord = $('#<%=HiddenCoord.ClientID%>').val().split(',');  
  25.         var lat = coord[0];  
  26.         var lng = coord[1];  
  27.         var address = $('#<%=HiddenAddress.ClientID%>').val();  
  28.         $("#normal_map").css({  
  29.             "width": w + "px",  
  30.             'height': h + 'px'  
  31.         });  
  32.         MapApi.LoadLocationMap(lat, lng, 'normal_map', "<p>" + address + "</p>");  
  33.   
  34.     });  
  35. </script>  


注：

 

(1).script中http://api.map.baidu.com后面的ak是申請的key，與前面文章中所說的key一致。

(2).引用了jquery的庫。

(3).如果還引用了jquery.mobile的庫，以適應移動端使用的，記得要將div設置相應的高度和寬度，不然可能會顯示一片空白。因為jquery.mobile在渲染時會對頁面進行適配的處理。

(4).載入地圖的部分封裝到了map.js中，其代碼如下

 

[javascript]  view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. var MapApi = (function () {  
  2.     return {  
  3.         LoadLocationMap: function (lat, lng, containerId, showText) {  
  4.             ///<summary>載入地圖</summary>  
  5.             ///<param name="lat">緯度值</param>  
  6.             ///<param name="lng">經度值</param>  
  7.             ///<param name="containerId">地圖容器ID,一般為Div的Id.</param>      
  8.             var map = new BMap.Map(containerId);            // 創建Map實例  
  9.             var point = new BMap.Point(lng, lat); // 創建點坐標  
  10.             var marker = new BMap.Marker(point);  // 創建標注  
  11.             map.addOverlay(marker);              // 將標注添加到地圖中  
  12.             map.centerAndZoom(point, 15);  
  13.             map.enableScrollWheelZoom();                 //啟用滾輪放大縮小  
  14.             var opts = {  
  15.                 width: 50,     // 信息窗口寬度  
  16.                 height: 30,     // 信息窗口高度  
  17.                 title: showText, // 信息窗口標題  
  18.                 enableMessage: false,//設置允許信息窗發送短息  
  19.                 message: showText  
  20.             }  
  21.             var infoWindow = new BMap.InfoWindow("", opts);  // 創建信息窗口對象  
  22.             map.openInfoWindow(infoWindow, point); //開啟信息窗口      
  23.         },  
  24.         LoadMap: function (lat, lng, panoramaContainerId, normalMapContainerId) {  
  25.             //全景圖展示  
  26.             var panorama = new BMap.Panorama(panoramaContainerId);  
  27.             panorama.setPosition(new BMap.Point(lng, lat)); //根據經緯度坐標展示全景圖  
  28.             panorama.setPov({ heading: -40, pitch: 6 });  
  29.   
  30.             panorama.addEventListener('position_changed', function (e) { //全景圖位置改變后，普通地圖中心點也隨之改變  
  31.                 var pos = panorama.getPosition();  
  32.                 map.setCenter(new BMap.Point(pos.lng, pos.lat));  
  33.                 marker.setPosition(pos);  
  34.             });  
  35.             //普通地圖展示  
  36.             var mapOption = {  
  37.                 mapType: BMAP_NORMAL_MAP,  
  38.                 maxZoom: 18,  
  39.                 drawMargin: 0,  
  40.                 enableFulltimeSpotClick: true,  
  41.                 enableHighResolution: true  
  42.             }  
  43.             var map = new BMap.Map(normalMapContainerId, mapOption);  
  44.             var testpoint = new BMap.Point(lng, lat);  
  45.             map.centerAndZoom(testpoint, 18);  
  46.             var marker = new BMap.Marker(testpoint);  
  47.             marker.enableDragging();  
  48.             map.addOverlay(marker);  
  49.             marker.addEventListener('dragend', function (e) {  
  50.                 panorama.setPosition(e.point); //拖動marker后，全景圖位置也隨着改變  
  51.                 panorama.setPov({ heading: -40, pitch: 6 });  
  52.             });  
  53.         }  
  54.     }  
  55. })();  

注：該JS中還封裝了全景圖的函數。

 

下面看一下后端代碼

 

[html]  view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. public partial class ViewMap : System.Web.UI.Page  
  2.     {  
  3.         protected void Page_Load(object sender, EventArgs e)  
  4.         {  
  5.             if (!IsPostBack)  
  6.             {  
  7.                 InitLoad();  
  8.             }  
  9.         }  
  10.   
  11.         private void InitLoad()  
  12.         {  
  13.             Coordinate coordinate = new Coordinate("39.92", "116.46");  
  14.             CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);  
  15.             HiddenAddress.Value = coordLocationResult.result.formatted_address;  
  16.             HiddenCoord.Value = String.Format("{0},{1}",   
  17.                                               coordLocationResult.result.location.lat,   
  18.                                               coordLocationResult.result.location.lng);  
  19.         }  
  20.     }  

注:

 

(1).通過BaiduMap.FetchLocation得到坐標的定位信息。

(2).將得到的地址和坐標賦值到隱藏域中，以便前端使用JS來讀取。

測試結果如下圖

這樣就實現了坐標的前端定位。當然如果有需要，還可以將某段時間內獲取的坐標點在地圖上畫出軌跡來，這個可以參考百度地圖的說明。

這是通過坐標來定位的，而坐標的定位一般都是在移動設備上，那如果在PC端呢？這個就需要使用到IP定位


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 C#顯示百度地圖API 百度地圖定位開發——Android地圖sdk開發 前端開發騰訊地圖定位以騰訊經緯度轉百度經緯度 c# 引用百度地圖 html5定位並在百度地圖上顯示 百度地圖 顯示，定位，輪廓圖 百度地圖開發-顯示地圖默認界面 03 Android開發百度地圖應用——實現定位功能 百度地圖API：使用百度定位 百度地圖在前端開發中的運用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM