C#的百度地图开发(四)前端显示与定位

2018-06-23 22:41:43来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的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定位

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:老码农教你在 StackOverflow 上谈笑风生

下一篇:ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件