转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart
摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript API来说,在线地图主要还是基于Javascript的前端开发技术,毫无疑问这就像"火腿肠"与"生猪"关系一样前后不搭,这本身与.net Framework为后台的SharePoint 2010毫无交集,但是很多开发者不知道如何把这2者结合起来进行"和谐利用",因此笔者写下Google Map与SharePoint 如何结合开发系列篇章,读者可以用SharePoint这堆猪肉去做一个带Google标记的火腿肠了:
所有源代码将在本系列最后一章给出,读者可以自行下载(本文由Dosboy 在[cnblogs]原创请转载时注明出处)
1、 如何在SharePoint 2010中开发带连接交互功能(向其它WEBPART提供坐标值)的Web 部件;
2、 如何开发并在WebPart部件中插入Javascript代码,用于Google地图功能开发;
本文不需要读者有高深的开发基础,能看得懂的基本的C#、Javascript代码,理解SharePoint的基本功能就行。
创建WebPart并加入地图显示代码的详细步骤:
1. 在Visual Studio 2010 中,新建项目,在C#项目模板中选择"SharePoint"下的,创建一个SharePoint 类型的可视Web部件
然后把这个项目名称命名为: MapLocationPick ,
下面系统会跳出一个对话框,要求输入SharePoint网站的URL,请照实输入,一路确认就OK了。
Debug: 进行第1步要求系统已经安装SharePoint 2010 Server,并且在服务器上已经安装了Visual Studio 2010、SharePoint SDK这2个组件。
2.下面自定义项目属性。
先改系统自动命名的文件,系统会自动生成一大堆文件,在IDE文件列表中,把所有的文件名改成如下的名称,以方便记忆:
然后在点开MapPickWebPart.webpart 这个文件,在这个以.webpart结尾的文件里,定义了这个Web部件在SharePoint显示的名称:
- <properties>
- <property name="Title" type="string">Dosboy坐标选取</property>
- <property name="Description" type="string">Dosboy坐标选取</property>
- </properties>
我们把properties节下面的属性改成上面代码所示的内容
3.申请Google API KEY ,写代码之前为了能够使用Google地图我们需要申请一个KEY,读者可以自行参考如下链接来写Google的代码和申请KEY
https://developers.google.com/maps/documentation/javascript/tutorial
4.写HTML标记代码。 双击MapPickWebPartUserControl.ascx 文件,这个ASCX文件其实就是一个"用户控件",这个控件是被代码自动加载到WEB部件当中的。
如下图,点击"源",用于修改HTML代码,插入如下的标记
- <p>
- 坐标:<input
- id="dosboyTxtPoint" type="text" style="background-color: #DDDDDD" />搜索地址:<input id="dosboyTxtSearch"
- style="width: 184px" type="text"/>
- <input id="dosboyBtnSearchMap" type="button" value="搜图" onclick="return Button1_onclick()" /></p>
以上的标记表示了一个用以显示坐标值的文框,并且背景是灰的,一个用来输入地址以定位搜索地图显示的文本框,和一个按钮。
然后在后面再插入如下的标记:
- <div id="allmap" style="width:100%;height:350px"></div>
这个标记表示一个DIV层,ID为allmap,宽度是100%,高度是350px ,这个DIV标记就是GOOGLE地图的容器,用来显示GOOGLE地图的地方。
5.写Javascript代码。同样在这个ASCX控件的HTML页"源"中,我们在DIV标记后面,插入如下的Javascript代码,用以把这个DIV标记变成地图:
- <script type="text/javascript">
- //下面方法用以把函数加载到SP页面加载完毕后运行
- _spBodyOnLoadFunctionNames.push('loadGmapScript');
- //定义GOOGLE地图的变量
- var map;
- //对GOOGLE地图进行引用,并在引用成功后加载dosboy_loadMap函数
- function loadGmapScript() {
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "http://maps.googleapis.com/maps/api/js?key=这里填写第3步申请的KEY值&sensor=false&callback=dosboy_loadMap";
- document.body.appendChild(script);
- }
- function dosboy_loadMap() {
- //定义地图的属性:中心点(坐标),缩放级别(11),地图类型(路网图)
- var mapOptions = {
- center: new google.maps.LatLng(32.028, 119.814),
- zoom: 11,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- //把allmap为ID的DIV标记定义为上面属性的地图,并把对象赋给map
- map = new google.maps.Map(document.getElementById("allmap"), mapOptions);
- }
- }
- </script>
6.部署并预览结果,在项目文件右击,选择"部署",然后打开SharePoint页面,如下图添加一个名为Dosboy坐标选取的WEB部件到当前页面
经过第一章,这个地图可以完美的显示出来,下面我们将要增加他的功能,首先要完成在搜索地址一栏输入地址时并按"搜图"时,我们地图可以定位到这个地方,其次鼠标单击地图时,可以在地图上标记出来,并且在坐标一栏中显示出坐标值来,请继续关注哦!
转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart的更多相关文章
- [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart
摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...
- SharePoint 2010中重置windows 活动目录(AD)域用户密码的WebPart(免费下载)
由于SharePoint 2013推出不久,并非所有的企业都会升级到SharePoint 2013的,毕竟升级不是打打补丁这么简单,更多的企业还是使用Sharepoint 2010版本的,因此本人自行 ...
- SharePoint 2010 WebPart Web部分 总的膏
SharePoint 2010 WebPart Web部分 总的膏 之前写SharePoint WebPart Web部分相关的博客,我们没有做一个索引.网友在查看的时候非常不方便,于 ...
- SharePoint 2010 隐藏快速启动栏之使用内容编辑器webpart
SharePoint 2010 自带的webpart里有一个叫内容编辑,在媒体和内容分类里面: 将其添加到页面后效果: 点击用于添加新内容,此时注意Ribbon菜单中的变化: 这里可以看到,你可以插入 ...
- Sharepoint 2010 之 WebPart
转:http://blog.csdn.net/bestbadgod/article/details/6895542 Sharepoint系列的博客,都是我个人自学过程中的点滴的积累,毕竟没做过C#及A ...
- sharepoint 2010 如何使用sharepoint多媒体视频播放media webpart功能
转:http://www.cfanz.cn/?c=article&a=read&id=40449 在sharepoint 2010中,有一个新的功能,支持在页面上播放视频.主要是通过一 ...
- [SharePoint 2010] Visual Studio 2010內撰寫視覺化WebPart超簡單
新一代的Visual Studio 2010對於SharePoint 2010的專案撰寫,有非常另人讚賞的改進. 以往寫一個WebPart要搞好多雜七雜八的步驟,也要硬寫HTML輸出,當然有人說可以寫 ...
- SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框
SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框 SharePoint 2010 使得往你的站点加入对话框内容变得出乎意料的简单 ...
- SharePoint 2010 网站备份还原简单介绍
今天尝试了SharePoint2010网站的备份和还原,从网上搜一些文档看看,然后自己试试,感觉和2007的操作没什么太大的区别,跟大家分享下自己尝试的命令行方式和数据库的方式,2007自己常用的也是 ...
随机推荐
- 《JavaScript高级程序设计》读书笔记 ---创建对象
虽然Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用工厂模式的一种变体. 工厂模式工厂 ...
- Python 2.X-关于函数返回的数值类型
在使用同一个函数,相同的参数的时候,参数在传递的过程中使用了不同的形式(有无小数点)决定了该函数返回的值的类型. # -*- coding:utf-8 -*- def return_types(one ...
- java 移位运算
移位运算 :将整数转化为二进制(以补码的形式),按位平移. << 左移 >> 右移 >>> 无符号右移 << 右移: 按位做平 ...
- SQL语句的优化
1.创建索引 表中数据经常需要用的哪些字段数据进行过滤,则添加该字段的索引,索引相当如一本书的目录,能加快查询数据的速度:同时在新建索引的时候,将需要查询的列,在包含性 列中新增上去,能减少查询语句的 ...
- linux下如何使用vnstat查看服务器带宽流量统计
因为很多vps或者服务器都是限流量的,但是又很多服务商并没有提供详细的流量表,比如每天的流量表,所以肯定有人很想知道自己服务器到底跑了多少流量. vnstat就是一个很好用的服务器流量统计命令.我截几 ...
- Linux shell 操作 postgresql,并设置crontab任务
Linux shell 操作 postgresql:删除间隔日期的数据-删除指定日期的数据-vacuumdb 清理数据库 -清理日志 -定期执行脚本 *修改pg_hba.conf 设置本地连接无密码, ...
- hdu 1407 测试你是否和LTC水平一样高
Description 大家提到LTC都佩服的不行,不过,如果竞赛只有这一个题目,我敢保证你和他绝对在一个水平线上! 你的任务是: 计算方程x^2+y^2+z^2= num的一个正整数解. Inpu ...
- 2016NEFU集训第n+3场 D - Bicycle Race
Description Maria participates in a bicycle race. The speedway takes place on the shores of Lake Luc ...
- HTML转PDF
1)使用工具转换.如:wkhtmltopdf 2)Chrome浏览器打印功能中,有另存为PDF格式文件.(推荐最便捷)
- 【洛谷P1352】没有上司的舞会
[洛谷P1352]没有上司的舞会 x舷售 锚」翅θ 但是 拙臃 蓄ⅶ榔 暄条熨卫 翘ヴ馇 表现无愧于雪月工作室的核心管理 爸惚扎掬 颇瓶 芟缆肝 貌痉了 洵┭笫装 嗝◇裴腋 褓劂埭 ...