- 積分
- 57
- 威望
- 57
- 金錢
- 63
- 最後登錄
- 2013-5-22
|
个人做一个本地的折扣网站,想加入本地地图,百度很多后发现soso地图可以,抛砖引玉,希望有老大完善。
一、效果展示:
演示地址:http://0349zk.utmall.com/index.php
二、原理及代码:
根据客户IP自动定位到客户所在城市。- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>SOSOMap</title>
- <style type="text/css">
- *{
- margin:0px;
- padding:0px;
- }
- body, button, input, select, textarea {
- font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
- }
- p{
- width:1024px;
- padding-top:3px;
- overflow:hidden;
- }
- </style>
- <script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
- <script>
- var geolocation,map,marker = null;
- var init = function() {
- var center = new soso.maps.LatLng(39.916527,116.397128);
- map = new soso.maps.Map(document.getElementById('container'),{
- center: center,
- zoomLevel: 13
- });
- geolocation = new soso.maps.Geolocation();
- geolocation.position({}, function(results, status) {
- var city = document.getElementById("city");
- if (status == soso.maps.GeolocationStatus.OK) {
- map.setCenter(results.latLng);
- city.style.display = 'inline';
- city.innerHTML = '所在位置: ' + results.name;
- if (marker != null) {
- marker.setMap(null);
- }
- marker = new soso.maps.Marker({
- map: map,
- position:results.latLng
- });
- } else {
- alert("检索没有结果,原因: " + status);
- }
- });
- }
- </script>
- </head>
- <body onload="init()">
- <span style="height:30px;display:none" id="city"></span>
- <div style="width:1024px;height:800px" id="container"></div>
- </body>
- </html>
複製代碼 三、使用说明:
1.把以上代码复制并保存为map.html
2.在论坛发帖,上传map.html附件
3.在后台—帖子—附件管理,找到map.html的绝对地址,并复制
4.在后台—界面—导航栏,添加一个导航栏菜单,并把链接设为map.html的绝对地址。并设置链接打开方式为“在新窗口打开”。
四、存在问题:
地图只能在新页面打开,不能在论坛里像浏览帖子那样打开,有待高手解决。 |
|