作者：卞功鑫  ，转载请保留。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 显示地图的更多相关文章

  1. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

  2. Swift - 使用MapKit显示地图，并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  3. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  4. openlayers一：显示地图与鼠标地理坐标

    openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...

  5. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  6. (android 地图实战开发)2 创建MapActivity,根据设备当前位置，显示地图

    (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图 http://www.cnblogs.com/macroxu-1982/archive/2011/09/13 ...

  7. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  8. 百度地图设置div样式宽高为百分比不显示地图

    如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...

  9. 【Silverlight】Bing Maps学习系列（二）：通过Bing Maps Silverlight Control如何显示地图（转）

    [Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...

随机推荐

  1. 06-Java 本地文件操作

    1.File类简介 创建好:File file=new File("hello.txt"); 后,按住Ctrl键.单击File.会出现File的源代码. 在视图左下角双击" ...

  2. 第一篇帖子，就弄个JS动态公告浏览吧，直接上代码

    .scroll{    margin-left:45px;    margin-top:-150px;    height:100px;    width:300px;} <script lan ...

  3. Linux-HAproxy+Keepalived

    HAproxy+++++++++++++Info+++++++++++VIP:192.168.1.222HA-Master IP:192.168.1.117HA-Backup IP:192.168.1 ...

  4. Struts2 Interceptors

    Alias Interceptor : 别名拦截器 <action name="someAction" class="com.examples.SomeAction ...

  5. WPF4.5 中的新增功能和增强功能的信息

    本主题包含有关 Windows Presentation Foundation (WPF) 版本 4.5 中的新增功能和增强功能的信息. 本主题包含以下各节: 功能区控件 改善性能,当显示大时设置分组 ...

  6. javascript中的事件学习总结

    一.实例: 一段用js实现的固定边栏滚动特效代码(跨浏览器使用): 二.总结: 由于事件处理在不同浏览器之间存在差异(主要是要考虑ie8及以下浏览器的兼容性),所以在使用处理事件的方法之前,先要判断当 ...

  7. Django的列表反序

    Django虽然是python的web框架,但它不是所有的python特性都支持的. 最近在项目中遇到一个问题,需要在Django中将获得的列表反序排列,一开始我使用的是python的reverse方 ...

  8. LVM---动态调整磁盘容量

    LVM:logical volume manager(逻辑卷管理):LVM屏蔽了底层磁盘布局,方便于动态调整磁盘容量. 一.创建逻辑卷的步骤: 1)通过fdisk 工具将磁盘转换为linux分区 2) ...

  9. 【转】c#实现文件下载

    需求:点击SAVE,去ajax去后台下载文件,完成后出现保存对话框,然后直接下载. 解决方案:下载完成后用JS转到向到另一个页面,在这页面Page_Load里用C#Response对象直接下载. 下载 ...

  10. 黄聪：Discuz!X/数据库操作方法、DB::table、C::t

    函数 功能 DB::table($tablename) 获取正确带前缀的表名,转换数据库句柄, DB::delete($tablename, 条件,条数限制) 删除表中的数据 DB::insert($ ...