C#的百度地图开发(四)前端显示与定位
2015-06-08 09:14
363 查看
有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API。下面是示例代码。
前端代码
[html] view plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<%@ 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 plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
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 plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
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来读取。
测试结果如下图
![](http://img.blog.csdn.net/20150114104851236?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHhkZGRhaWw=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这样就实现了坐标的前端定位。当然如果有需要,还可以将某段时间内获取的坐标点在地图上画出轨迹来,这个可以参考百度地图的说明。
这是通过坐标来定位的,而坐标的定位一般都是在移动设备上,那如果在PC端呢?这个就需要使用到IP定位
前端代码
[html] view plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<%@ 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 plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
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 plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
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定位
相关文章推荐
- JavaScript高级用法三之浏览器对象
- 源码推荐(6.8):带标题、可改变样式的自定义ActionSheet,TYWaterWaveView 水波浪圆形进度
- 基于jQuery全屏相册插件zoomVisualizer
- C#自写的一个HTML解析类(类似XElement语法)
- node.js学习总结(不定期更新)
- Jsp&Servlet笔记
- "portrait"(竖屏) "landscape"(横屏) css设置
- JavaScript中的anchor()方法使用详解
- 分享web前端七款HTML5 Loading动画特效集锦
- 一个读写缓冲模块
- JS或jQuery获取ASP.NET服务器控件ID的方法
- js特效示例
- javascript 实现tab菜单切换
- 上传图片显示预览js代码
- javascript理解闭包概念
- Javascript(函数)整理
- nodejs express 框架使用
- 利用JQuery实现web页面中table导出excel的功能
- Yii2禁用默认引入的jquery
- 为 Lync 2013 前端升级 Sql Server 2012 Express SP1