discuz X2编辑器中添加google静态地图【更新至20120205】

懒得手改的同学，请移步至插件版：
[url=[dx2.0 dx2.5]编辑器中添加静态地图插件版v1.0(20120414更新) https://discuz.dismall.com/thread-2753024-1-1.html]https://discuz.dismall.com/thread-2753024-1-1.html[/url]
谢谢大家的支持！

使用过程中的几个问题，请大家移步到本帖相应楼层：
1.关于多点标注添加的问题，请参考本帖16楼建议。
2.关于地图权限的问题，请参考本帖43楼及44楼建议。
3.关于修改默认载入城市地图的问题，请参考本帖64楼建议。
4.关于制作成编辑器discuz代码的问题，请参考本帖65楼及66楼建议。
5.有时间修改文件的同学，还是建议自己对相关文件按以下步骤进行修改。

附件下载（下载之前，请仔细阅读下文）：

附件重新上传后的连接如下：

utf-8版本请查看本帖95#楼，感谢网友@曾子图提供：
https://discuz.dismall.com/forum.php? ... DB8MjUwMDE2NA%3D%3D

更新日志：2012年2月5日：
1）基于Dx2.0的20111121版本重新更新了下附件，懒人安装20111121版的DX2可以直接下载附件并上传覆盖即可。
2）更新了googlemap.html里边索引js文件的路径（之前的版本由于疏忽，填写了本人网站的路径）。
2011年11月19日：
更新googlemap.js文件，在function searchMap(zoom)中加入定位marker坐标的语句，修正了直接点搜索框且直接插入时，可能不显示marker的bug。function searchMap(zoom)函数更新为：

1. function searchMap(zoom){
   
2.         var address = $('#address').val();
   
3.         var geocoder = new google.maps.Geocoder();
   
4.         geocoder.geocode( { 'address': address}, function(results, status) {
   
5.                 if (status == google.maps.GeocoderStatus.OK) {
   
6.                         var tlatlng=results[0].geometry.location;
   
7.                         if(zoom)map.setZoom(zoom);
   
8.                         map.setCenter(tlatlng);
   
9.                         marker.setPosition(tlatlng);
   
10.                         marker.setTitle(address);
    
11.                         marker_lat = marker.getPosition().lat();//20111119更新
    
12.                         marker_lng = marker.getPosition().lng();//20111119更新
    
13.                         gelMapURL();
    
14.                 }
    
15.                 else alert(address + " 地址错误，未找到当前地址");
    
16.         });
    
17. }

复制代码

2011年11月17日：
感谢28楼的flexpad朋友提出的优化建议：

主要优化在修改editor.js的第二个case 'googlemap'语句后
将原来这句：
var mapsrc = window.frames[ctrlid + '_param_1'].document.getElementById("mapurl").value;
替换成：
var mapsrc = document.getElementById(ctrlid + '_param_1').contentWindow.document.getElementById("mapurl").value;

在2012年2月5日13时之前下载本文附件的同学，请按以上建议修改相关文件；在此时间之后的，请各位直接下载附件参考，谢谢！

---

在帖子里直接添加地图，可能很多站长需要。从“关于我们”插件得到启发，通过修改相关文件在编辑器中实现了这个功能（本人不太懂js，本文所陈述的修改的部分代码，可能有所冗余，希望高手指点），希望能给需要此功能的站长启发和帮助。先看截图：
下图为在编辑器中嵌入的按钮以及弹出的操作框。


选定地图后，点提交，自动插入到输入框中。

---

下面是文件的一些说明，大家也可以直接下载附件，上传覆盖即可！本文中相关文件的使用，如有疑问，可与我联系，yongbing@ichangning.com，如果大家觉得实用，就顶一个，谢啦！
1、修改的相关文件
\static\js\editor.js
\template\default\common\editor.css
\template\default\forum\post_editor_body.htm
2、添加的相关文件
\googlemap文件夹
\static\image\common\map.gif
3、修改步骤
1）打开editor.js
搜索“function discuzcode(cmd, arg) ”函数；
在以下代码

1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword',

复制代码

后添加'googlemap'，变为

1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword', 'googlemap']) || cmd == 'tbl' || in_array(cmd, ['fontname', 'fontsize', 'forecolor', 'backcolor']) && !arg) {

复制代码

在“function showEditorMenu(tag, params)”函数的第一个“case 'pasteword':......break”后增加以下代码

1. case 'googlemap'://此case画出googlemap对话框by yongbing@ichangning.com
   
2. stitle = '插入google地图';
   
3. str = '通过搜索插入google地图（暂只支持单点标注）！';
   
4. menuwidth = 600;
   
5. menupos = '00';
   
6. menutype = 'win';
   
7. //var mapurl=this.frames[ctrlid+'_param_1'].document.getElementById("addMap").click(pasteMap);
   
8. break;

复制代码

在第二个“case 'pasteword':......break”后增加以下代码

1. case 'googlemap':////此case执行googlemap对话框与输入框的传值by yongbing@ichangning.com
   
2. var mapsrc = document.getElementById(ctrlid + _param_1').contentWindow.document.getElementById("mapurl").value;//20111117修改
   
3. var str = '';
   
4. if(wysiwyg) {
   
5. insertText(str, str.length, 0, false, sel);
   
6. }else {
   
7. insertText('[img]' + mapsrc + '[/img]', 0, 0, false, sel);
   
8. }
   
9. hideMenu('', 'win');
   
10. break;

复制代码

该文件修改完成。
2）打开editor.css文件
在头部添加以下代码

1. #e_googlemap { background:transparent url({STATICURL}image/common/map.gif) no-repeat 0 0; overflow: hidden;background-position: 5px 1px;}

复制代码

此文件修改完成
3）打开post_editor_body.htm文件
找到“<a id="{$editorid}_fls" title="{lang e_flash_title}">{lang e_flash}</a>”，在其后添加以下代码

1. 地图<!--添加googlemap按钮-->

复制代码

此文件修改完毕。
注：添加在这里的话，该功能的使用权限与多媒体代码相同，也可放到其他地方。

4）将googlemap文件包上传到网站根目录。
5）即可。
效果如下：

不错  支持

不错，支持下

有百度版吗？

小树叶子 发表于 2011-11-15 07:34
有百度版吗？

可以参照google的改下，可能比较简单。我看了搜狗的地图api有个一键转换的功能，百度的还没研究过！^_^

占领一楼怎么样

DZ今天被灌水，帮楼主顶上去

不错 支持！

待会儿试一下 貌似不错 尤其是用到分类信息版块、活动版块

fuckgao 发表于 2011-11-15 08:10
待会儿试一下 貌似不错 尤其是用到分类信息版块、活动版块

恩，暂时只能添加单点标注！大家可以研究下如何添加多点，或者路径之类的！
本文的这个修改很简单：
1、在编辑器添加一个按钮，按下按钮弹出参数采集页面，在里面设置一个iframe，引用一个独立的googlemap页面；
2、点击提交按钮的时候，从ifame传出google静态图片地址参数，然后贴到编辑器输入框里边。

如果要修改成非静态图片类型的地图（可扩展性更强）：
1、重新制作下ifame的引用页，生成装载地图的div容器；（可能比较复杂，需要参阅google地图api）
2、把div容器传回，直接贴到编辑器的输入框。
大家可以讨论下具体的实现的。