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

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

前端代码

[html] view plaincopy

  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中,其代码如下

[javascript] view plaincopy

  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中还封装了全景图的函数。

下面看一下后端代码

[html] view plaincopy

  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定位

时间: 2024-11-06 14:50:55

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

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

一个. 百度地图城市位置和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了怎样申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述怎样定位城市位置.定位自己的位置和进行城市兴趣点POI(Point of Interest)搜索.那么怎样在百度地图上定位某一个位置呢?       通过类GeoPoint能够定义经纬度,它存放着纬度值和经度值,通过getLastKnownLocation()方法能够获取Location对象,再定位经纬度设置其为地图中心就可以显

关于如何在安卓的百度地图开发里面简单实现持续定位

这几天自己研究了关于地手机上面开发安卓地图的问题,发现百度官方示例demo讲解百度持续定位方面还是讲解的有些不清楚,本人研究了几次之后将其弄得更详细以便于让各位方便学习,有不足之处请在评论区指出,官方示例的网址是:http://lbsyun.baidu.com/index.php?title=android-locsdk/guide/v5-0 上面的网址已经将安卓简单配置百度地图环境讲解的很详细了,再次不做赘述了,此外,可能会有人发现 1 package com.example.andoridl

Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

标签: Android百度地图API Key  分类: Android 百度地图开发(2)  最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注!   一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/a

百度地图开发定位与显示Demo(Android)

百度地图给我们提供了非常丰富的API供我们进行二次开发.百度地图的SDK与定位SDK在今年6月份进行了更新.地图更新为3.0,定位更新为4.2.百度说:这次更新对接口有了较大部分的调整,与之前版本不兼容.本篇博文基于以上最新版本的API提供一个小例子:获取自己当前的经纬度坐标,并且显示在地图上.这里只给出核心代码,其他KEY的引入,地图控件的添加,权限的声明,定位服务的声明可在百度地图API官网(http://developer.baidu.com/map/sdkandev-download.h

Android studio 百度地图开发(3)地图导航

email:[email protected] 开发环境:win7 64位,Android Studio,请注意是Android Studio,使用的导航SDK版本:3.1.0. 地图显示.工程配置请参考:Android studio 百度地图开发(1)配置工程.显示地图 百度地图定位请参考:Android studio 百度地图开发(2)地图定位 一.我为百度做点事 因为在写定位功能时自己想从头到尾地写,但最后完全是参考了百度官网上的Demo才弄出来,后来发现用Android Studio做导

C#的百度地图开发(五)IP定位

前面我们已经实现了坐标定位及前端显示,而坐标的获取一般只在移动设备上,对于PC端难以得到.但是在PC端,我们可以得到相应的IP.在得到了IP之后,我们就可以进行定们了.代码如下: public class BaiduMap { /// <summary> /// 依据IP获取定位信息的URL模板. /// 参数1:百度地图API的KEY. /// 参数2:IP. public const string IP_LOCATION_URL_TEMPLATE = "http://api.ma

百度地图开发环境配置

百度地图开发环境配置 1.下载百度地图SDK 开发者可在百度地图AndroidSDK的下载页面下载到最新版的地图SDK. 下载地址为:http://developer.baidu.com/map/index.php?title=androidsdk/sdkandev-download 在这个界面我们可以按照自己的需求下载相应的SDK,同时可选择下载开发包.实例代码.及参考类.现在,只选择下载开发包.下载完成后打开压缩包.可以看到如下文件内容: readme文件是帮助文档,libs文件夹中文件如下

Android studio 百度地图开发(5)查询周边服务(加油站)

email:[email protected] 开发环境:win7 64位,Android Studio,请注意是Android Studio,使用的导航SDK版本:3.1.0. 百度地图应用(1):Android studio 百度地图开发(1)配置工程.显示地图 百度地图应用(2):Android studio 百度地图开发(2)地图定位 百度地图应用(3):Android studio 百度地图开发(3)地图导航 百度地图应用(4):Android studio 百度地图开发(4)触摸选点

百度地图开发(二)之添加覆盖物 + 地理编码和反地理编码

之前写过一篇关于百度地图开发的blog,主要介绍了百度地图的基本地图的显示. 详见:Android百度地图开发(一)之初体验 下面来看一下地图上覆盖物的添加,以及地理编码和反地理编码. 添加覆盖物 在地图上添加覆盖物,一般需要以下几个步骤: 1. 定义坐标点,有可能是一个,有可能是多个(比如:多边形覆盖物). 2. 构造OverlayOptions(地图覆盖物选型基类). 3. 在地图上添加覆盖物. 4. 添加相应的监听事件. 在API中可以看到,BaiDuMap类中有一个方法: 这个方法就是用