给商城加上完美51地图！

2016-07-07 16:47 来源：www.chinab4c.com 作者：ecshop专家

还是先上图吧，更有说服力


感觉51地图比google的清爽速度快，而且不用什么KEY等等，所以选择了51地图，都是增加一些语句，不修改原有程序内容。
首先登录phpmyadmin在ecm_store表中增加lng，lat，zoom，3个字段，都设为int,长度10,zoom设置长度2就ok，或者直接执行以下语句
  1. ALTER TABLE `ecm_store` ADD `lng` int(10) NOT NULL ;
  2. ALTER TABLE `ecm_store` ADD `lat` int(10) NOT NULL ;
  3. ALTER TABLE `ecm_store` ADD `zoom` int(2) NOT NULL ;
复制代码
修改/app/my_store.app.php文件找到
  1. 'domain'=> $subdomain
复制代码
在后面插入
  1. 'lng' => $_POST['lng'],
  2. 'lat' => $_POST['lat'],
  3. 'zoom' => $_POST['zoom'],
复制代码
修改/themes/mall/default/my_store.index.html文件找到
  1. <span class="padding1">{$lang.msn_info}</span>{/if}</td>
复制代码
在后面插入
  1. <tr>
  2. <th>我的位置</th>
  3. <td class="chico_maplz">
  4. {if $store.lng == 0}<p>设置我的地理位置。
  5. </p>
  6. <!---地图标注开始--->
  7. <div id="mapDiv" style="position:absolute;width:645px; height:260px; padding-bottom:10px"></div>{/if}
  8. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
  9. <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
  10. <span style="padding-top:3px">
  11. 经度：<input size="8" class="text" type="text" name="lng" id="lng" value="{$store.lng|escape}" readonly="readonly" />　
  12. 纬度：<input size="8" class="text" type="text" name="lat" id="lat" value="{$store.lat|escape}" readonly="readonly" />　
  13. 缩放：<input size="1" class="text" type="text" name="zoom" id="zoom" value="{$store.zoom|escape}" readonly="readonly" />　
  14. {if $store.lng != 0}修改我的地理位置：{/if}
  15. </span>
  16. <span><script language="JavaScript">
  17. function setMap(point,zoom)
  18. {
  19. document.getElementById("lng").value=point.getLongitude();
  20. document.getElementById("lat").value=point.getLatitude();
  21. document.getElementById("zoom").value=zoom;
  22. }
  23. {if $store.lng == 0}var ezmarker=new LTEZMarker("ezmarker",1,document.getElementById("mapDiv"));//页面内固定的地图
  24. {else}var ezmarker=new LTEZMarker("ezmarker");{/if}//页面内弹出式地图
  25. ezmarker.setDefaultView( new LTPoint({if $store.lng == 0}12029999{else}{$store.lng|escape}{/if},{if $store.lat == 0}3157777{else}{$store.lat|escape}{/if}),1);//默认锁定坐标
  26. {if $store.lng != 0}ezmarker.setValue(new LTPoint({$store.lng|escape},{$store.lat|escape}),{$store.zoom|escape});{/if}
  27. ezmarker.setSearch(true,"无锡");//默认搜索城市
  28. LTEvent.addListener(ezmarker,"mark",setMap);//插入一个实例

  30. </script></span>
  31. <!---地图标注结束--->
  32. </td>
  33. </tr>
复制代码
其中12029999和3157777是我设定的默认焦点，如果用户已经设置了地图那么焦点成为他设定的，默认搜索城市是无锡，您可以改成您自己的。为了用户操作体验已经加了一些判断，你可以改成你觉得合理的方式。
为了美观起见，还是修改这个文件，顶部CSS代码，找到
  1. <style type="text/css">
  2. .information .info table{ width :auto;}
  3. </style>
复制代码
改成
  1. <style type="text/css">
  2. .information .info table{ width :auto;}
  3. .chico_maplz { padding-left:7px;}
  4. .chico_maplz input {
  5. font-size: 11px;
  6. color: #CCCCCC;
  7. font-weight: bold;
  8. }
  9. .chico_maplz p {
  10. margin-bottom:6px;
  11. line-height: 18px;
  12. }
  13. .chico_maplz span {float:left;}
  14. </style>
复制代码
最后是在内容页面插入地图就大功告成了，修改\themes\store\default\left.html文件，找到
  1. <div class="clear"></div>
  2. </div>
复制代码
在后面插入
  1. <div class="module_common">
  2. <h2 class="common_title veins1">
  3. <span class="ico1"><span class="ico2">商家地理</span></span>
  4. </h2>
  5. {if $store.lng != 0}
  6. <div id="myMap" style="position:relative; width:100%; height:300px;"></div>
  7. <script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
  8. <script language="javascript">
  9. var maps = new LTMaps( "myMap" );
  10. maps. centerAndZoom ( new LTPoint({$store.lng|escape},{$store.lat|escape}) ,3);
  11. var marker1 = new LTMarker( new LTPoint({$store.lng|escape},{$store.lat|escape}) );
  12. maps.addOverLay( marker1 );
  13. var control = new LTSmallMapControl();
  14. maps.addControl( control );
  15. </script>{else}
  16. 此商家暂时未发布地理位置
  17. {/if}
  18. </div>
复制代码
OK了，简单几步，加上完美地图！前台的地图样式可以参考51地图的开发文档，任何你想要的都可以，哈哈，比google的自由多了，方便多了！


回答：
来顶！！！

支持。。。。

:lol :lol

好贴，顶起分享

更新一下吧 现在好像不好使了~谢谢~

支持楼主啊 能教教俺不~！

有必要有，官方应该加上地图和点评

楼主，能否写个详细的安装步骤

谢谢，测试成功

这东西好是好，，就是会导致网站变慢，，，建议还是不好用的好

楼主指点，改后该页乱码了

http://ecmall.shopex.cn/bbs/view ... &extra=page%3D1

好，好，有空研究下

收藏，感谢lz。
正在google和51徘徊中。