免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] dz论坛中插入soso地图 [打印本頁]
作者: aisisi8    時間: 2013-4-11 09:41     標題: dz论坛中插入soso地图

个人做一个本地的折扣网站，想加入本地地图，百度很多后发现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的绝对地址。并设置链接打开方式为“在新窗口打开”。
四、存在问题：
地图只能在新页面打开，不能在论坛里像浏览帖子那样打开，有待高手解决。
作者: 梅子爱阿政    時間: 2016-2-11 19:41

以后试试！！
作者: 4rphotoclub    時間: 2016-2-12 11:04

來看看这是否可行啊！



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://utmall.com/discuz/) Powered by Discuz! 7.2