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

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

前端代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head id="Head1" runat="server">
  5. <title>地图</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <script src="/js/map.js"></script>
  8. <script src="/js/jquery.js"></script>
  9. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXX"></script>
  10. </head>
  11. <body>
  12. <div id="normal_map"></div>
  13. <input type="hidden" runat="server" id="HiddenCoord" />
  14. <input type="hidden" runat="server" id="HiddenAddress" />
  15. </body>
  16. </html>
  17. <script type="text/javascript">
  18. $(document).ready(function () {
  19. var w = $(window).width();
  20. var h = $(document).height();
  21. var coord = $('#<%=HiddenCoord.ClientID%>').val().split(',');
  22. var lat = coord[0];
  23. var lng = coord[1];
  24. var address = $('#<%=HiddenAddress.ClientID%>').val();
  25. $("#normal_map").css({
  26. "width": w + "px",
  27. 'height': h + 'px'
  28. });
  29. MapApi.LoadLocationMap(lat, lng, 'normal_map', "<p>" + address + "</p>");
  30. });
  31. </script>

注：

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

(2).引用了jquery的库。

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

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

  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. panorama.addEventListener('position_changed', function (e) { //全景图位置改变后，普通地图中心点也随之改变
  30. var pos = panorama.getPosition();
  31. map.setCenter(new BMap.Point(pos.lng, pos.lat));
  32. marker.setPosition(pos);
  33. });
  34. //普通地图展示
  35. var mapOption = {
  36. mapType: BMAP_NORMAL_MAP,
  37. maxZoom: 18,
  38. drawMargin: 0,
  39. enableFulltimeSpotClick: true,
  40. enableHighResolution: true
  41. }
  42. var map = new BMap.Map(normalMapContainerId, mapOption);
  43. var testpoint = new BMap.Point(lng, lat);
  44. map.centerAndZoom(testpoint, 18);
  45. var marker = new BMap.Marker(testpoint);
  46. marker.enableDragging();
  47. map.addOverlay(marker);
  48. marker.addEventListener('dragend', function (e) {
  49. panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
  50. panorama.setPov({ heading: -40, pitch: 6 });
  51. });
  52. }
  53. }
  54. })();

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

下面看一下后端代码

  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. private void InitLoad()
  11. {
  12. Coordinate coordinate = new Coordinate("39.92", "116.46");
  13. CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);
  14. HiddenAddress.Value = coordLocationResult.result.formatted_address;
  15. HiddenCoord.Value = String.Format("{0},{1}",
  16. coordLocationResult.result.location.lat,
  17. coordLocationResult.result.location.lng);
  18. }
  19. }

注:

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

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

测试结果如下图

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

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

C#的百度地图开发(四)前端显示与定位的更多相关文章

  1. [android] 百度地图开发 (两).所在地的城市定位和城市POI搜索

    一个. 百度地图城市位置和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了怎样申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述怎样定位城市位置.定 ...

  2. Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  3. Android studio 百度地图开发（3）地图导航

    Android studio 百度地图开发(3)地图导航 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...

  4. Android studio 百度地图开发（2）地图定位

    Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...

  5. Android 百度地图开发之一（Hello BaiDu Map）

    之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...

  6. C#的百度地图开发(三)依据坐标获取位置、商圈及周边信息

    原文:C#的百度地图开发(三)依据坐标获取位置.商圈及周边信息 我们得到了百度坐标,现在依据这一坐标来获取相应的信息.下面是相应的代码 public class BaiduMap { /// < ...

  7. C#的百度地图开发(一)发起HTTP请求

    原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相应的数据时,需要通过URL传值,然后获取相 ...

  8. 【百度地图开发之二】基于Fragment的地图框架的使用

    写在前面的话: [百度地图开发之二]基于Fragment的地图框架的使用(博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明. Author:hmji ...

  9. 调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标

    最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的.真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整 ...

随机推荐

  1. js 动态切换视频

    如图所示,想要一个这样的效果,就是点击下面视频标题时,上面的视频跟着切换,但是要求页面不重新加载. 参考文章在这里 这里贴上部分代码供大家参考. <li id="about_li6&q ...

  2. mui如何增加自定义字体icon图标

    http://ask.dcloud.net.cn/article/128 字体地址:http://www.iconfont.cn/

  3. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

  4. Swift - 使用socket进行通信（附聊天室样例）

    在Swift开发中,如果我们需要保持客服端和服务器的长连接进行双向的数据通信,使用socket是一种很好的解决方案. 下面通过一个聊天室的样例来演示socket通信,这里我们使用了一个封装好的sock ...

  5. [置顶] ※数据结构※→☆线性表结构（queue）☆============队列 顺序存储结构（queue sequence）（八）

    队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进行删除操作的 ...

  6. Python金融应用编程(数据分析、定价与量化投资)

    近年来,金融领域的量化分析越来越受到理论界与实务界的重视,量化分析的技术也取得了较大的进展,成为备受关注的一个热点领域.所谓金融量化,就是将金融分析理论与计算机编程技术相结合,更为有效的利用现代计算技 ...

  7. 基于visual Studio2013解决面试题之0209最大堆排序

     题目

  8. KDB支持单步调试功能(ARM架构)

    0    实践发现KDB不支持step调试功能 (本文针对的是arm CotexA9架构,各种架构的实现方式不一样,    X86的好像已经支持,不过本人没有验证过) 1    首先看下要调试的代码段 ...

  9. 最全的Swift社交应用文本输入优化汇总

    在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下Swift社交应用文本输入优化技巧. AD: 一.输入相 ...

  10. VC/MFC 工具栏上动态添加组合框等控件的方法

    引言 工具条作为大多数标准的Windows应用程序的一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开发 ...