首页 > 学院 > 开发设计 > 正文

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

2019-11-14 15:58:55
字体：大 中 小
来源：转载
供稿：网友

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

前端代码

 

[html] view plaincopy在CODE上查看代码片
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>    <!DOCTYPE html>      <html xmlns="http://www.w3.org/1999/xhtml">  <head id="Head1" runat="server">      <title>地图</title>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <script src="/js/map.js"></script>      <script src="/js/jquery.js"></script>      <script type="text/Javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXX"></script>  </head>  <body>      <div id="normal_map"></div>      <input type="hidden" runat="server" id="HiddenCoord" />      <input type="hidden" runat="server" id="HiddenAddress" />  </body>  </html>  <script type="text/javascript">      $(document).ready(function () {          var w = $(window).width();          var h = $(document).height();          var coord = $('#<%=HiddenCoord.ClientID%>').val().split(',');          var lat = coord[0];          var lng = coord[1];          var address = $('#<%=HiddenAddress.ClientID%>').val();          $("#normal_map").CSS({              "width": w + "px",              'height': h + 'px'          });          MapApi.LoadLocationMap(lat, lng, 'normal_map', "<p>" + address + "</p>");        });  </script>  

注：

 

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

(2).引用了jquery的库。

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

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

 

[javascript] view%20plaincopy
var MapApi = (function () {      return {          LoadLocationMap: function (lat, lng, containerId, showText) {              ///<summary>载入地图</summary>              ///<param name="lat">纬度值</param>              ///<param name="lng">经度值</param>              ///<param name="containerId">地图容器ID,一般为Div的Id.</param>                  var map = new BMap.Map(containerId);            // 创建Map实例              var point = new BMap.Point(lng, lat); // 创建点坐标              var marker = new BMap.Marker(point);  // 创建标注              map.addOverlay(marker);              // 将标注添加到地图中              map.centerAndZoom(point, 15);              map.enableScrollWheelZoom();                 //启用滚轮放大缩小              var opts = {                  width: 50,     // 信息窗口宽度                  height: 30,     // 信息窗口高度                  title: showText, // 信息窗口标题                  enableMessage: false,//设置允许信息窗发送短息                  message: showText              }              var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象              map.openInfoWindow(infoWindow, point); //开启信息窗口              },          LoadMap: function (lat, lng, panoramaContainerId, normalMapContainerId) {              //全景图展示              var panorama = new BMap.Panorama(panoramaContainerId);              panorama.setPosition(new BMap.Point(lng, lat)); //根据经纬度坐标展示全景图              panorama.setPov({ heading: -40, pitch: 6 });                panorama.addEventListener('position_changed', function (e) { //全景图位置改变后，普通地图中心点也随之改变                  var pos = panorama.getPosition();                  map.setCenter(new BMap.Point(pos.lng, pos.lat));                  marker.setPosition(pos);              });              //普通地图展示              var mapOption = {                  mapType: BMAP_NORMAL_MAP,                  maxZoom: 18,                  drawMargin: 0,                  enableFulltimeSpotClick: true,                  enableHighResolution: true              }              var map = new BMap.Map(normalMapContainerId, mapOption);              var testpoint = new BMap.Point(lng, lat);              map.centerAndZoom(testpoint, 18);              var marker = new BMap.Marker(testpoint);              marker.enableDragging();              map.addOverlay(marker);              marker.addEventListener('dragend', function (e) {                  panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变                  panorama.setPov({ heading: -40, pitch: 6 });              });          }      }  })();  

注：该JS中还封装了全景图的函数。

 

下面看一下后端代码

 

[html] view%20plaincopy
public partial class ViewMap : System.Web.UI.Page      {          PRotected void Page_Load(object sender, EventArgs e)          {              if (!IsPostBack)              {                  InitLoad();              }          }            private void InitLoad()          {              Coordinate coordinate = new Coordinate("39.92", "116.46");              CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);              HiddenAddress.Value = coordLocationResult.result.formatted_address;              HiddenCoord.Value = String.Format("{0},{1}",                                                 coordLocationResult.result.location.lat,                                                 coordLocationResult.result.location.lng);          }      }  

注:

 

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

(2).将得到的地址和坐标赋值到隐藏域中，以便前端使用JS来读取。

测试结果如下图

这样就实现了坐标的前端定位。当然如果有需要，还可以将某段时间内获取的坐标点在地图上画出轨迹来，这个可以参考百度地图的说明。

这是通过坐标来定位的，而坐标的定位一般都是在移动设备上，那如果在PC端呢？这个就需要使用到IP定位




发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布
2019-10-23 09:17:05
搜狐张朝阳：回归媒体是搜狐重新崛起的关键
2019-10-21 09:20:02
华为轮值董事长郭平：虚拟技术创造现实价值
2019-10-21 09:00:12
滴滴英文服务上线两周年 用户已超200万
2019-09-26 08:57:12
华为推出全球至快AI训练集群Atlas900
2019-09-25 08:46:36
马斯克：特斯拉正组建中国技术团队
2019-09-25 08:15:43

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2019 VEVB.COM. All Rights Reserved.武林网 版权所有