CRM IFRAME 显示地图
作者:卞功鑫 ,转载请保留。http://www.cnblogs.com/BinBinGo/p/5274409.html
需要背景:
现在已经有经纬度,需要在地图上显示出来。
环境: CRM 4.0
实现:
1 在CRM创建新tab,添加一个 IFRAME_DT
2 新建一个html网页,可以接收URL的参数,其实主要是经纬度的数值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度开发key"></script>
<title>ditu</title>
</head>
<body>
<div id="allmap" ></div>
</body>
</html>
<script type="text/javascript"> var x = 119.37661;
var y = 34.66922;
var name ='kanion';
var new_x = GetQueryString("x");
var new_y = GetQueryString("y");
var new_name = GetQueryString("name"); if(new_x!="")
{
x=new_x;
}
if(new_y!="")
{
y=new_y;
}
if(new_name!=""&&new_x!="" &&new_y!="")
{
name=new_name;
} var ggPoint = new BMap.Point(x,y);
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
//bm.panBy(400,300);
bm.addControl(new BMap.NavigationControl());
bm.enableScrollWheelZoom(true);
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, function(data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
bm.addOverlay(marker);
var label = new BMap.Label(name,{offset:new BMap.Size(20,-10)});
marker.setLabel(label); } }); function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return (r[2]); return null;
} </script>
showPIO.html
3 在CRM表单 onload事件中使用拼接字符串加入参数。
这里一般应该是加入在ISV里的,但是客户系统中没有找到对应的ISV,但是发现系统中有个webserver的端口,所以把HTML文件放入了 些端口下的文件夹了。
//加载地图
var x = crmForm.all.new_lng.DataValue;
var y = crmForm.all.new_lat.DataValue;
var name = crmForm.all.new_accountid.DataValue[0].name;
document.getElementById("tab1").style.DISPLAY="inline"
//此处很重要,不然地图中心点会在左上角显示
crmForm.all.IFRAME_qddt.src = "http://" + document.URL.split("/")[2] + ":8080/showPIO.html?x=" + x + "&y=" + y + "&name=" + name;
没有什么好说的只是 document.getElementById("tab1").style.DISPLAY="inline" 这个很重要
如果没有上面这句,CRM的tab 只有第一个tab0的style.DISPLAY="inline"
百度地图在初始化的时候,隐藏的 div会导致,地图认为 网页的宽高都为0,所以地图的中心点也为(0,0)。就导致了,地图的中心点显示在了左上角。
所以在绑定showPOI.html网页的时候先,把tab1的style.DISPLAY="inline" 。
如果其它情况下,无法设置 div的属性,可以采取强制偏移的方法试试
var ggPoint = new BMap.Point(x,y);
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.panBy(400,300);//强制偏移
后记: tab 的点击事件,可以通过点击时再绑定网页。
crmForm.all.tab1Tab.onclick = function() {
alert("Tab 1 clicked");
}
本文完。
CRM IFRAME 显示地图的更多相关文章
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
- Swift - 使用MapKit显示地图,并在地图上做标记
通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...
- 转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart
[原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...
- openlayers一:显示地图与鼠标地理坐标
openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...
- 百度地图api通过地址显示地图,白名单
百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...
- (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图
(android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图 http://www.cnblogs.com/macroxu-1982/archive/2011/09/13 ...
- android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图
1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...
- 百度地图设置div样式宽高为百分比不显示地图
如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...
- 【Silverlight】Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图(转)
[Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...
随机推荐
- 使用Ef时,对一个或多个实体的验证失败。有关详细信息,请参见“EntityValidationErrors”属性。
EntityValidationErrors 关于如何查看 EntityValidationErrors 详细信息的解决方法 我们在 EF 的编程中,有时候会遇到这样一个错误: 但是,按照他的提示 ...
- HTML5之Canvas绘图实例——饼状图
实现饼状分布画图(如下):调试环境:Firefox
- excel 组及分级显示制作教程
1.思路:利用“组及分级显示”功能,将每一个项目作为“摘要行”,将需要被“收起”或“展开”的内容,也就是项目所包含的内容作为“明细数据行.2.制作方法: 方法1:使用手工“组合”例如下图中,A2代表的 ...
- CentOS6.5系统挂载NTFS分区的移动硬盘 centos安装repoforge源(yum)
CentOS6.5系统挂载NTFS分区的移动硬盘 作为IT的工作者,避免不了使用Linux系统,我现在使用的系统是CentOS6.5 X86_64位版本,但是插入NTFS移动硬盘没有办法识别.通过下面 ...
- ASP.NET MVC3升级到ASP.NET MVC4 的方法
ASP.NET MVC3升级 ASP.NET MVC4 的方法: 1.先去掉引用的System.Web.Mvc.dll(MVC3版本),重新引入System.Web.Mvc.dll(MVC4版本) 2 ...
- HTML5 CANVAS 高级
加载图片 获取图像有三种方式: a : createImageData(),没有效率,一个像素一个像素的绘制: b : var img= document.getElementById("i ...
- Struts2 - Action no cache
整了两天,终于找到一个比较满意的答案了:如何让action不被浏览器缓存 写一个interceptor: package com.my.interceptor; import javax.servle ...
- 【Andorid开发框架学习】之Mina开发之客户端开发
昨天我们讲到了Mina的基本知识点.如果还有不懂得同学可以看一下我昨天的博客.http://www.cnblogs.com/getherBlog/p/3934927.html今天我着重来讲一下基于Mi ...
- activiti自定义流程之自定义表单(三):表单列表及预览和删除
注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...
- 3. Map与Tuple
一. Map 对偶 (1)对偶是一个映射.多个对偶形成map (2)对偶的表示:(k,v)或者k->v Map(哈希类型) (1)map的声明与查询 scala> val map1 = M ...