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定位
  • 相关阅读:
    不敢相信！JDK 8 的 HashMap 依然会死循环…
    为什么 MySQL 不推荐默认值为 null ？
    Spring 事务的那些坑，都在这里了！
    Spring Boot 启动事件和监听器，太强大了！
    Oracle 要慌了！华为终于开源了自家的 Huawei JDK——毕昇 JDK！
    ArcMap与REST时间不一致，SQL Server时间转换
    为什么jsonloader被从threejs中移除？-threejs jsonloader has been removed
    Dojo小部件(widget)和样式(themes)自定义
    ReferenceError: require is not defined
    Nodejs是什么？
  • 原文地址：https://www.cnblogs.com/gc2013/p/4553795.html
Copyright © 2011-2022 走看看