zoukankan      html  css  js  c++  java
  • 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 { 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");
    }

    本文完。

     

  • 相关阅读:
    软链接的应用(在同一目录下方便查看日志)
    decimal模块
    python的request包
    jmeter的环境配置
    java交互方式中的同步与异步
    mysql数据库的快捷键
    [LeetCode]Number of Islands
    [LeetCode]Binary Tree Right Side View
    [LeetCode]House Robber
    [微软实习生2014]K-th string
  • 原文地址:https://www.cnblogs.com/BinBinGo/p/5274409.html
Copyright © 2011-2022 走看看