导航

CRM IFRAME 显示地图

Posted on 2016-03-14 03:22  yiyishuitian  阅读(538)  评论(0)  编辑  收藏  举报

作者：卞功鑫  ，转载请保留。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");
}

本文完。