商家地图标注功能实现

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

本人初学PHP，对PHP不太熟，参照“uchome同城邂逅插件”自行更改的，如有不对的地方，还请多多凉解。
现在放出来给分享给大家！
如大家有什么改进的地方，麻烦分享！
本人测试多次可用，但没有网站，所以没有演示！


首先打开Google地图
ditu.google.cn
在上面寻找一个地址，然后上下左右移动地图，让这个地址正好处于地图的正中心位置，当您想寻找坐标位置已经处于地图的中心位置的时候，
拷贝并粘贴以下代码到你的浏览器地址栏：
  1. javascript:void(prompt('',gApplication.getMap().getCenter()));
复制代码
复制代码然后回车一下。这时，你将得到一个弹出式的坐标，这个坐标就是你需要找的经度和纬度

申请 google map 的 key，在http://code.google.com/intl/zh-CN/apis/maps/signup.html 处申请获取key
后面要用到
#############################分割线#######################

第二步：
使用 phpmyadmin登陆您的ecmall数据库，（需要修改数据库哦）
执行下面的SQL代码
  1. ALTER TABLE `ecm_store` ADD `lat` varchar(20) NOT NULL AFTER `region_name` ;
  2. ALTER TABLE `ecm_store` ADD `lng` varchar(20) NOT NULL AFTER `lat` ;
  3. ALTER TABLE `ecm_store` ADD `zoom` char(3) NOT NULL AFTER `lng` ;
复制代码
表名为ecm_store 店铺信息


#############################分割线#######################



第三步:
1).在themes\mall\default中找到my_store.index.html，并以编辑方式打开;
2).找到
  1. <tr>
  2. <th>{$lang.im_msn}:</th>
  3. ......
  4. </tr>
复制代码
--------------------------------------------------
在以上代码之后添加
-------------------------------------------------
  1. <tr>
  2. <th class="align3"><p><b>地图标注:</b><br /><br />拖动地图左边的比例尺放大缩小地图，点击"标注位置"按钮,地图上会出现气球图标，把气球拖动到你要标记的地方即可!</p></th>
  3. <td>
  4. <input type="button" id="btn_addMarker" disabled value="标注位置" onclick="AddMarker()" class="btn" />
  5. <div id="d_map" style="background-color:#FFF;border:solid 6px gray;width:581px;margin-top:3px;">
  6. <div style="width:580px; height:300px;background-color:#f3f3f3;" id="map_canvas"></div></div>
  7. <input type="hidden" name="lng" id="lng" value="{$store.lng}" />
  8. <input type="hidden" name="lat" id="lat" value="{$store.lat}" />
  9. <input type="hidden" name="zoom" id="zoom" value="{$store.zoom}" />
  10. <input type="hidden" name="sid" id="sid" value="{$store.store_id}" />
  11. </td>
  12. </tr>
复制代码
--------------------------------------------------



#############################分割线#######################
第四步：
仍然在themes\mall\default中找到my_store.index.html在页面代码的最后{include file=footer.html}之前添加以下代码，注意把“此处为您申请的key”内容改成你的开始获得的key，不然无法使用
--------------------------------------------------
  1. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的key type="text/javascript"></script>
  2. <script type="text/javascript">
  3. var myMap;
  4. var myMarker;
  5. window.onload = function() {
  6. if (GBrowserIsCompatible()) {
  7. myMap = new GMap2(document.getElementById("map_canvas"));
  8. var center = new GLatLng(32.06454,118.79405); //这个地方就是调整默认显示哪里的，里面的经纬度,请在表格最下面查询，输入你所在的县市如果没有县级，请查询地级市，后面的前面2个数值串，就是经度和纬度，注意中间用，号隔开
  9. myMap.addControl(new GLargeMapControl());
  10. myMap.addControl(new GScaleControl());
  11. myMap.enableScrollWheelZoom();
  12. if (document.getElementById("lat").value == ""){
  13. myMap.setCenter(center, 10);//这个地方就是可以修改到显示多少级别的，如果想显示到街道级别，把10改为16就差不多了，可以自己//改改看
  14. document.getElementById("btn_addMarker").disabled = false;
  15. }
  16. else{
  17. var _lat = document.getElementById("lat").value;
  18. var _lng = document.getElementById("lng").value;
  19. var _zoom = document.getElementById("zoom").value;
  20. var _center = new GLatLng(_lat,_lng);
  21. myMap.setCenter(_center,parseInt(_zoom));
  22. document.getElementById("btn_addMarker").disabled = true;
  23. Mark(_lat,_lng);
  24. }
  25. }
  26. }
  27. function Mark(lat,lng){
  28. myMarker = new GMarker(new GLatLng(lat,lng), {draggable: true});
  29. GEvent.addListener(myMarker, "click", function() {
  30. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
  31. });
  32. GEvent.addListener(myMarker, "dragstart", function() {
  33. myMarker.closeInfoWindow();
  34. });
  35. GEvent.addListener(myMarker, "dragend", function() {
  36. var gll = myMarker.getLatLng();
  37. document.getElementById("lat").value = gll.lat();
  38. document.getElementById("lng").value = gll.lng();
  39. document.getElementById("zoom").value = myMap.getZoom();
  40. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
  41. });
  42. myMap.addOverlay(myMarker);
  43. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
  44. }
  45. function AddMarker(){
  46. document.getElementById("btn_addMarker").disabled = true;
  47. var ll = myMap.getCenter();
  48. document.getElementById("lat").value = ll.lat();
  49. document.getElementById("lng").value = ll.lng();
  50. document.getElementById("zoom").value = myMap.getZoom();
  51. Mark(ll.lat(),ll.lng());
  52. }
  53. function DeleteMarker(){
  54. document.getElementById("btn_addMarker").disabled = false;
  55. myMap.removeOverlay(myMarker);
  56. var gll = myMarker.getLatLng();
  57. document.getElementById("lat").value = "";
  58. document.getElementById("lng").value = "";
  59. document.getElementById("zoom").value = "";
  60. }
  61. </script>
复制代码
------------------------------------------------------
#############################分割线#######################
再找到app\my_store.app.php
找到下段代码
------------------------------------------------------
  1. $data = array_merge($data, array(
  2. 'store_name' => $_POST['store_name'],
  3. 'region_id'=> $_POST['region_id'],
  4. 'region_name'=> $_POST['region_name'],
  5. 'description'=> $_POST['description'],
  6. 'address' => $_POST['address'],
  7. 'tel'=> $_POST['tel'],
  8. 'im_qq'=> $_POST['im_qq'],
  9. 'im_ww'=> $_POST['im_ww'],
复制代码
------------------------------------------------------
紧跟之后加以下代码
------------------------------------------------------
  1. 'lng'=> $_POST['lng'],
  2. 'lat'=> $_POST['lat'],
  3. 'zoom' => $_POST['zoom'],
复制代码
------------------------------------------------------
#############################分割线#######################

第五步:
1). 在themes/store/default/left.html，并以编辑方式打开;

2). 找到
  1. <div class="wrap">
  2. <div class="wrap_child">
  3. <div class="major">
  4. <ul class="list">
复制代码
------------------------------------------------------------------
在之前添加
  1. <div class="module_common">
  2. <h2 class="common_title veins1">
  3. <div class="ornament1"></div>
  4. <div class="ornament2"></div>
  5. <span class="ico1"><span class="ico2">现在位置</span></span>
  6. </h2>
  7. <!--{if $store.lat}-->
  8. <iframe src="http://你的网址/themes/store/default/map.htm?lat={$store.lat}&lng={$store.lng}&name={$store.store_name|escape}" frameborder="0" scrolling="no"width="204px" height="250px" ></iframe>
  9. <!--{/if}-->
  10. </div>
复制代码
****此处使用<iframe></iframe>不会因为二级域名（网址变了，google api不能用）所以使用<iframe></iframe>*****
#############################分割线#######################

第六步： 在themes\store\default目录下新建map.htm，在页面代码的最后添加，注意把“此处为您申请的key”内容改成你的开始获得的key，不然无法使用
代码如下：
  1. <script language="JavaScript">
  2. function Request(argname)
  3. {
  4. var url = document.location.href;
  5. var arrStr = url.substring(url.indexOf("?")+1).split("&");
  6. //return arrStr;
  7. for(var i =0;i<arrStr.length;i++)
  8. {
  9. var loc = arrStr[i].indexOf(argname+"=");
  10. if(loc!=-1)
  11. {
  12. return arrStr[i].replace(argname+"=","").replace("?","");
  13. break;
  14. }
  15. }
  16. return "";
  17. }
  18. </script>
  19. <div id="space_location" class="wrap">
  20. <p><div style="top:-12px;left:-9px;width:204px;;height:250px;overflow:hidden;border:solid 1px #ccc;" id="map_canvas"></div></p>
  21. </div>
  22. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的key type="text/javascript"></script>
  23. <script type="text/javascript">
  24. document.write('<script type="text/javascript" src="http://你的网址/includes/libraries/javascript/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  25. </script>
  26. <script type="text/javascript">
  27. window.onload = function() {
  28. if (GBrowserIsCompatible()) {
  29. var map = new GMap2(document.getElementById("map_canvas"));
  30. var center = new GLatLng( Request("lat"), Request("lng"));
  31. map.setCenter(center, 15);
  32. var opts = { text : Request("name")};
  33. var marker = new PopupMarker(center, opts);
  34. map.addOverlay(marker);
  35. }
  36. }
  37. </script>
复制代码

附上两个JS文件解压覆盖即可不会覆盖原文件


回答：
附上图片:


声明下：本人已从发布本贴开始到现在，没有改过ECMALL任何东西了，所以大家问的问题，我也是一头雾水，
不知何原因，请各位高手帮帮忙吧。(我也是东拼西凑弄出来的，好久没弄都不记得了，所以很抱歉)

大家可以看 他的演示 8楼的站(签名里有)，是使用成功的，大家可以参考下


支持，可以更完善吗？

原帖由 biby 于 2009-10-30 15:53 发表
支持，可以更完善吗？


你还有什么想法

最好能做成挂件

很好很强大！

支持，但是希望结合前后台设置，店主自行寻找店铺位置，标注，然后代码生成，然后启用地图。

修正楼主一个错误，建立的文件是map.htm不是html

感谢作者协助，我已经应用了。犯了个低级错误2个脚本没拷贝。


先做个记号，待会儿来修改！
谢了！

这个不错.........

要是能让店铺主自己添加就更完美了

本来就是店主自己添加

我也来 支持一下

map.htm里语法错了。
应为：
<script language="JavaScript">
function Request(argname)
{
var url = document.location.href;
var arrStr = url.substring(url.indexOf("?")+1).split("&");
//return arrStr;
for(var i =0;i<arrStr.length;i++)
{
var loc = arrStr.indexOf(argname+"=");
if(loc!=-1)
{
return arrStr.replace(argname+"=","").replace("?","");
break;
}
}
return "";
}
</script>

关于“商家地图标注功能实现”出现的问题
请教各位：关于“商家地图标注功能实现”出现的问题：
后台正常
前台无法显示


请教大家我什么地方出错了