在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要，在系统中使用地图显示设备的地理位置。考虑过ArgGIS，Bing和Baidu地图。本来想用ArgGIS，看教程嫌麻烦。所以还是用Web地图吧。Bing的话还要申请个key，没心情。百度地图刚好有人申请了，所以我用Baidu地图。毫无逻辑的根据。权且当练手。貌似Bing地图更好点，后面会具体权衡下的。废话不多说。
做了一个下午，参考了以下几个很有用的网站：
1.How to use Google Maps inXAF ASP.NET application https://www.devexpress.com/Support/Center/Question/Details/T195734
基本上照着这个教程，就可以实现目的了。思路很清晰，而且带下载附件。非常赞的一个指导帖子。
2.How to :Implement an ASP.NET Web List Editor Using a Custom Control
https://documentation.devexpress.com/#eXpressAppFramework/CustomDocument113126
指导如何添加自定义的WebListEditor，官方教程。
3.https://www.devexpress.com/Support/Center/Question/Details/T181324
这个帖子提的问题可以仔细考虑下
4.当然是百度地图API的官网
http://developer.baidu.com/map/
接下来介绍下我本人的实现过程：
首先，当然是实现公共接口，供自定义的ListEditor调用。代码如下：
//封装坐标
public interface IMapLatLng
{
double Latitude { get; }
double Longitude { get; }
}
//自定义ListEditor需要的参数
public interface IMapMaker
{
IMapLatLng Position { get; }
string ID { get; }
}
接口定义好了，这时候我们可以先设置一个类，继承该IMapMaker接口，以供显示作用，这里，将该类命名为CustomAddress。
//自定义一个地址类
[DefaultClassOptions,DefaultProperty("ID")]
public class CustomAddress:BaseObject,IMapMaker
{
public CustomAddress(Session session) : base(session) { }
public IMapLatLng Position
{
get { return new MapLatLng(){ Latitude=this.Latitude,Longitude=this.Longitude} ; }
} public string ID{get;set;}
public double Latitude { get; set; }
public double Longitude { get; set; }
} //封装坐标
public class MapLatLng:IMapLatLng
{
public double Latitude
{
get;
set;
} public double Longitude
{
get;
set;
}
}
前期铺垫完毕，下面就进入具体的ListEditor的设置。上代码。
[ListEditor(typeof(IMapMaker),true)]
public class MapListEditor:ListEditor
{
public MapListEditor(IModelListView listView) : base(listView) { } protected override void AssignDataSourceToControl(object dataSource)
{
WebWindow.CurrentRequestWindow.RegisterClientScript(Model.Id + "_markers_script", ConvertToJS(Enumerable.Cast<IMapMaker>((IEnumerable)dataSource)), true);
} public static string ConvertToJS(IMapMaker maker)
{
List<IMapMaker> makers = new List<IMapMaker>();
if (maker != null)
makers.Add(maker);
return ConvertToJS(makers);
} public static string ConvertToJS(IEnumerable<IMapMaker> makers)
{
string makersScript = "var markers=[";
if (makers != null)
{
foreach (IMapMaker maker in makers)
{
string title=(maker.ID==null)?"":maker.ID.Replace("'","\\'");
makersScript+=string.Format(@"{{title: '{0}',latitude:{1},longitude:{2} }},",title,maker.Position.Latitude,maker.Position.Longitude);
}
}
makersScript=makersScript.TrimEnd(',');
makersScript+="];";
return makersScript;
} public override DevExpress.ExpressApp.Templates.IContextMenuTemplate ContextMenuTemplate
{
get { return null; }
} protected override object CreateControlsCore()
{
return CreateMapControl();
} public override bool AllowEdit
{
get
{
return false;
}
set { }
} public static WebControl CreateMapControl()
{
Panel ctrl = new Panel();
ctrl.ID = "map-canvas";
ctrl.Height = new Unit();
ctrl.Width = new Unit();
ASPxPanel geoMapControlPanel = new ASPxPanel();
geoMapControlPanel.ID = "MapPanel";
geoMapControlPanel.Height = new Unit();
geoMapControlPanel.Width = new Unit();
geoMapControlPanel.RightToLeft = DevExpress.Utils.DefaultBoolean.True;
geoMapControlPanel.Controls.Add(ctrl); geoMapControlPanel.Load += delegate(object sender, EventArgs e)
{
geoMapControlPanel.ClientSideEvents.Init = @"
function ShowMap() {
var map=new BMap.Map(document.getElementById('"+ctrl.ClientID+ @"'));
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(new BMap.Point(116.404,23.915),11);
map.enableScrollWheelZoom(true);
if (typeof markers === 'undefined') {
}
else {
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var point=new BMap.Point(data.latitude,data.longitude);
var icon=new BMap.Icon('pin.png',new BMap.Size(20,32),{anchor:new BMap.Size(10,30)});
var mkr=new BMap.Marker(point,{icon:icon});
map.addOverlay(mkr);
}
}
}";
};
return geoMapControlPanel;
}
public override System.Collections.IList GetSelectedObjects()
{
return new object[];
} public override DevExpress.ExpressApp.SelectionType SelectionType
{
get { return DevExpress.ExpressApp.SelectionType.None; }
}
}
因为之前没接触过在XAF中调用JavaScripts的知识，所以这段程序中，对我而言，对这方面的知识更感兴趣。但在这里不是重点。后面会单独写一章，介绍在XAF中调用JavaScripts的，这里mark以下。
最后，还有一个最重要的一点，就是在default.aspx中调用百度地图的API。
<head runat="server">
<title>Main Page</title>
<meta http-equiv="Expires" content="0" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=[yourKey]"></script>
</head>
生成界面如下：
另外，讲下设计过程中，由于html和javascripts知识不牢固。犯了几点错误：
1.在开始写script元素的时候，没写结束标签：<script ... />。因为用的是chrome浏览器，它不支持这种写法，导致界面不显示任何内容。
2.改好这个错误后，发现界面可以显示其它内容，就是不显示地图。于是我是直接读页面的html和javascripts。发现竟然就是Bmap()这个构造函数少了个括号= =！
这里再强调下，xaf 写出的界面跟单纯用asp.net写其实差别不大，生成的页面就是一个单纯的html页面，如果出现显示问题，不妨直接读读html，更直观。
在XAF(ASP.NET)中以ListEditor的形式调用百度地图API的更多相关文章
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- 关于调用百度地图api在自己写的网页中实现和解决在https中正常显示
百度地图开发者:http://lbsyun.baidu.com/index.php?title=jspopular 我们打开百度地图开发者网站,注册一个百度账号,然后打开控制台,开始创建应用:(如果你 ...
- ASP.NET中调用百度地图API
1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...
- html5中高德、腾讯、百度 地图api调起手机app
html 部分 <div id="mapBg"> <div class="mapTab"> <a href="" ...
- 利用百度地图API,在浏览器中找到自己的位置
首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key 剩下的就是编码了 这里面会用到一个javascript里的一个函数,getMyLocation ...
- 【ASP.NET 进阶】根据IP地址进行百度地图定位
昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...
- Android中调用百度地图
一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...
- Android应用中使用百度地图API并加入标注（一）
网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就须要 ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- session_start保存的客户端cookie的值什么时候改变
//cookie记录的session_id立刻改变了session_start();echo "old:".session_id();session_regenerate_id() ...
- java生成简单Excel工作薄
前言: 代码都是建立在实际需求上的,上周做完一个调外部电影券接口的项目,这周产品又要excel表格,大致内容为:券所属影院.图片URL.等信息制作为excel表格,把每次同步过来的数据给他分析. jx ...
- myeclipse 10 优化
一.Myeclipse10修改字体 MyEclipse10是基于Eclipse3.7内核,但在Eclipse的Preferences-〉general-〉 Appearance->Colors ...
- 关于div居中
margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中
- 关于Cygwin的x-Server的自动运行以及相关脚本修改
常常需要用到远端服务器的图形工具,如果在windows端没用xserver的话,很多程序无法运行.一个特殊的例子,emacs在没用xserver的时候,是直接在终端中打开的,如果不修改cygwin.b ...
- Python在centos下的安装
1.wget http://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz默认下载到主目录下 2.tar xzf Python-2.6.6.tgz 3 ...
- 腾讯2015校招一面、二面、HR面
其实我目前的理想公司就是腾讯. 内推第三面跪了··· 现在校招. 已面完一面.二面.HR面··· 一面主要问我项目和Linux.网络··· 二面主要问我游戏服务器··· 然后是HR面··· 技术面我都 ...
- 提供给开发者 10 款最好的 Python IDE
Python 非常易学,强大的编程语言.Python 包括高效高级的数据结构,提供简单且高效的面向对象编程. Python 的学习过程少不了 IDE 或者代码编辑器,或者集成的开发编辑器(IDE).这 ...
- JavaScript中,{}+{}等于多少?
最近,Gary Bernhardt 在一个简短的演讲视频“Wat”中指出了一个有趣的 JavaScript 怪癖: 在把对象和数组混合相加时,会得到一些意想不到的结果. 本篇文章会依次讲解这些计算结果 ...
- 数往知来 ASP.NET 表单的提交_url传值_重定向 <十八>
一.表单提交时注意 如果是以get方式提交数据的时候,在接收时是用QueryString方式进行接收 如果是以post请求数据时在接收时是用Form进行接收 为什么么要这样做呢?我们用Request[ ...