zoukankan      html  css  js  c++  java

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

    有了这些定位信息，那要如何在前端的页面上显示出来呢？这需要用到百度地图的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.                  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定位
  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址：https://www.cnblogs.com/gc2013/p/4553795.html
Copyright © 2011-2022 走看看