免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖
个人做一个本地的折扣网站,想加入本地地图,百度很多后发现soso地图可以,抛砖引玉,希望有老大完善。

一、效果展示:

演示地址:http://0349zk.utmall.com/index.php

二、原理及代码:
根据客户IP自动定位到客户所在城市。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>SOSOMap</title>
  6. <style type="text/css">
  7. *{
  8.     margin:0px;
  9.     padding:0px;
  10. }
  11. body, button, input, select, textarea {
  12.     font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
  13. }
  14. p{
  15.     width:1024px;
  16.     padding-top:3px;
  17.     overflow:hidden;
  18. }
  19. </style>
  20. <script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
  21. <script>
  22. var geolocation,map,marker = null;
  23. var init = function() {
  24.     var center = new soso.maps.LatLng(39.916527,116.397128);
  25.     map = new soso.maps.Map(document.getElementById('container'),{
  26.         center: center,
  27.         zoomLevel: 13
  28.     });
  29.     geolocation = new soso.maps.Geolocation();
  30.     geolocation.position({}, function(results, status) {
  31.         var city = document.getElementById("city");
  32.         if (status == soso.maps.GeolocationStatus.OK) {
  33.             map.setCenter(results.latLng);
  34.             city.style.display = 'inline';
  35.             city.innerHTML = '所在位置: ' + results.name;
  36.             if (marker != null) {
  37.                 marker.setMap(null);
  38.             }
  39.             marker = new soso.maps.Marker({
  40.                 map: map,
  41.                 position:results.latLng
  42.             });
  43.         } else {
  44.             alert("检索没有结果,原因: " + status);
  45.         }
  46.     });
  47. }
  48. </script>
  49. </head>
  50. <body onload="init()">
  51. <span style="height:30px;display:none" id="city"></span>
  52. <div style="width:1024px;height:800px" id="container"></div>
  53. </body>
  54. </html>
複製代碼
三、使用说明:
1.把以上代码复制并保存为map.html
2.在论坛发帖,上传map.html附件
3.在后台—帖子—附件管理,找到map.html的绝对地址,并复制
4.在后台—界面—导航栏,添加一个导航栏菜单,并把链接设为map.html的绝对地址。并设置链接打开方式为“在新窗口打开”。
四、存在问题:
地图只能在新页面打开,不能在论坛里像浏览帖子那样打开,有待高手解决。

以后试试!!

TOP

來看看这是否可行啊!

TOP

返回列表