C#的百度地图开发(四)前端显示与定位
有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API。下面是示例代码。
前端代码
- <%@ 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中,其代码如下
- 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中还封装了全景图的函数。
下面看一下后端代码
- 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定位
转载于:https://www.cnblogs.com/gc2013/p/4553795.html
C#的百度地图开发(四)前端显示与定位相关推荐
- 超详细的Android百度地图开发:在APP上定位并显示出来
超详细的Android百度地图开发:在APP上定位并显示出来 一 写在前面 二 注册百度开发者账户.申请API KEY 三.代码实现 四.问题 五.总结 一 写在前面 由于项目所需,我需要在手机APP ...
- 百度地图 开发 乡镇级区域显示_Tableau导入乡镇级地图进行数据展示
Tableau具有强大的数据可视功能包括创建地图并展示相关数据,但是Tableau自带的地图仅有区或地级市这一级别,现在展示导入乡镇级别地图并联接相关数据. 一.付费下载地图 全国省市县乡镇街道社区村 ...
- AndroidStudio百度地图开发之显示地图
最近打算研究一些百度地图相关的东西,由于官方网站给的都是基于Eclipse开发的例子,所以在研究过程中遇到不少的坑,在这里记录一下,对 后来初用AndroidStudio 开发百度地图的兄弟们也算有个 ...
- 百度地图开发技术方案及解决办法
技术方案及解决办法 文章目录 技术方案及解决办法 总体方案 基础框架 前端网页 后端程序 结合搭建方法 跨域解决 python处理excel 问题描述 解决办法 网页结构 vue实例 内容引入 ele ...
- android百度地图开发
android百度地图开发 使用android开发百度地图需要事先在百度地图开发者平台上注册账号并下载百度地图相关的工具包,之后配置到自己的程序中,具体可参考https://lbsyun.baidu. ...
- Android studio 百度地图开发(3)地图导航
Android studio 百度地图开发(3)地图导航 email:chentravelling@163.com 工程下载地址:http://blog.csdn.net/chentravelling ...
- 基于Android的百度地图开发
参考资料: android studio获得SHA1的值,然后在百度地图移动版API官网申请key Android Studio怎么查看程序的安全码获取SHA1值? http://www.codese ...
- [android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识 上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
- C#的百度地图开发(一)发起HTTP请求
C#的百度地图开发(一)发起HTTP请求 原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相 ...
- Android 百度地图开发(三)--- 实现比例尺功能和替换自带的缩放组件
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/11821523 貌似有些天没有写博客了,前段时间在忙找工作的事,面试了几家公司,表示反响 ...
最新文章
- (转)利用libcurl和国内著名的两个物联网云端通讯的例程, ubuntu和openwrt下调试成功(四)...
- 算数基本定理(例题:LightOJ1341)
- canal解析mysql日志异常_利用Canal解析mysql binlog日志
- 【Python】学习笔记总结8(经典算法)
- JSP/Servlet中的汉字编码问题
- pip更换镜像源_Ubuntu20.04LTS更换软件源镜像
- E: Some index files failed to download. They have been ignored, or old ones used instead.解决方案
- 微课|中学生可以这样学Python(5.5.3节):字符串格式化2
- 华为如何造车?动机、底气、战略布局、客户
- 基于状态空间模型的控制器设计
- heidisql导入sql文件
- C语言作业:统计素数并求和
- 星星之火-45:5G技术地图
- 8255A并行 I/O 接口芯片
- srt转vtt——在线转换工具
- 定时任务监控服务Healthchecks
- Android 获取微信ua,微信小程序实现获取用户高清头像
- eclipse与DW联合开发java web项目
- 记录Springboot+Mybatis_Plus进行CRUD与分页的注意点
- Lesson 18 Electric currents in modern art 内容鉴赏
热门文章
- centos7 java 1.8_Centos7下安装Java JDK 1.8
- html项目案例_非常时期的健身IP案例-营销100案之8
- 用python写的游戏有哪些_想用Python写个小游戏?这个项目里有21个例子
- 【学习笔记】如何理解Raft中的ReadIndex?
- hdoj1160:FatMouse's Speed(dp+最长递减子序列思想+数组巧妙记录输出)
- php编译gd支持gif,我可以使用php和gd检测GIF动画吗?
- 算法:分离链表为两部分,小于某个值都在左边,大于等于某个值在右边 Partition List
- 算法:Merge k Sorted Lists(合并 k 个排序链表)
- docker删除es数据_docker使用系列之-(6).docker常用命令
- 【NLP】揭秘马尔可夫模型神秘面纱系列文章(二)