作者:卞功鑫  ,转载请保留。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. Q4: Two Sum

    问题描述: Given an array of integers, find two numbers such that they add up to a specific target number ...

  2. Why we made vorlon.js and how to use it to debug your JavaScript remotely

    Vorlon.js is powered by node.JS, socket.io, and late-night coffee. I would like to share with you wh ...

  3. string 字符串的分隔处理与list的相互转换

    在指定 String 数组的每个元素之间串联指定的分隔符 String,从而产生单个串联的字符串.(来源于MSDN) 有两个重载函数:[C#]public static string Join(   ...

  4. 解决json包含html标签无法显示的问题

    要是在json中包含html标签的话,在js接收数据的时候就会出现问题,导致接收失败. 所以在java端,对json包含有html标签的句子先进行转义. package com.alibaba.int ...

  5. UI-UIImageView和Image的区别

    1.UIImageView图片视图控件 继承于UIView 用于显示图片在应用程序中 2.UIImage 是将真实图片文件转化为程序中的图片,然后3.UIImageView是Image的载体,负责显示 ...

  6. 异步等待时,在异步前弹出窗口的TIMER,不会TICK

    窗体中用FORMS.TIMER,TICK不会走.改用TIMERS.TIMER 则正常.

  7. Python基础教程【读书笔记】 - 2016/7/10

    希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第五波:第1章  基础知识 [总览]  介绍如何得到所需的软件,然后讲一点点算法及其主要的组成.学习变量variable ...

  8. 【转】java 自动装箱与拆箱

    java 自动装箱与拆箱 这个是jdk1.5以后才引入的新的内容,作为秉承发表是最好的记忆,毅然决定还是用一篇博客来代替我的记忆: java语言规范中说道:在许多情况下包装与解包装是由编译器自行完成的 ...

  9. 就Double、Decimal来说数据计算异常

    场景: 客户提示发料时提示库存不足,可肉眼比对发料数量与库存数量没有一点问题. 但调度跟踪却发现出现“不可思议”的异常. 简单分析: 1.转Decimal再计算没问题.精度较高,存储方法也不一样,所以 ...

  10. 事件日志ID 2511:服务器服务无法重新创建 <sharename> 共享关系,因为 <address> 目录已不再存在

    服务器服务无法重新创建 QQMusicDownload 共享关系,因为 D:\QQMusic\QQMusicDownload 目录已不再存在.请运行 "net share QQMusicDo ...