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

2019-12-01 12:47栏目:竞技宝竞猜
TAG:

作为开发的初学者,这东西仅仅作为个人备份,如果能帮到忙也也不错(我开发用的php,但这是js这本身没多大影响) 这里要说明几个问题: 1.boxy调用的页面中不能出现《script》标签不然不能显示 2.boxy调用的时候要注意流程,要先加载出boxy然后再去渲染地图到boxy页面中 3.百度地图的加载js应放在弹出boxy的那个页面中 注意流程:boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', function{}方法来调用页面 关键触发js如下: 复制代码 代码如下: { $.ready { $("#Mechine_mec_points").click{ __MC.Map_coordinate.getcorrdinate; __MC.Map_coordinate = { getcorrdinate:function(){ $.get('/index.php?r=comm/map_coordinate', function{ //调用boxy对应的页面,页面中就只有一个id=allmap的div new Boxy(data,{ //在外面已经加载好百度地图AIP的js 'title':'地图坐标拾取', 'modal':true, 'draggable':false, 'unloadOnHide' : true, 'afterShow' : function(){ var map = new BMap.Map; map.centerAndZoom(new BMap.Point(106.566872, 29.536861), 17); map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 function showInfo{ $("#Mechine_mec_points").val(e.point.lng + ", " + e.point.lat); } map.addEventListener; }//aftershow结束 }); return false; }); }, } })();

有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API。下面是示例代码。

前端代码

 

[html] view plaincopy图片 1图片 2

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5.   
  6. <html xmlns=";  
  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=";  
  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中

(2).引用了jquery的库。

(3).如果还引用了jquery.mobile的库,以适应移动端使用的,记得要将div设置相应的高度和宽度,不然可能会显示一片空白。因为jquery.mobile在渲染时会对页面进行适配的处理。

(4).载入地图的部分封装到了map.js中,其代码如下

 

[javascript] view plaincopy图片 3图片 4

  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. })();  

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:C#的百度地图开发(四)前端显示与定位