请选择 进入手机版 | 继续访问电脑版

心得网

 找回密码
 立即注册

QQ登录

查看: 757|回复: 0
收起左侧

[信息分享] 分享一个图吧离线地图简单示例

[复制链接]
发表于 2016-11-18 16:38:12 | 显示全部楼层 |阅读模式
分享一个图吧离线地图简单示例

      图吧地图有在线的示例,但是很少看到有离线版的图吧地图示例,现在我将我项目对接过的图吧离线地图示例分享给大家。
图吧离线地图示例.png

一、环境介绍

1.在内网环境中有一台图吧离线地图服务器,部署成功后可以在浏览器访问,浏览器访问(http://60.191.206.42:3000)后的页面效果如下:

  1. Index of /
  2. • api/
  3. • layer/
  4. • maplite/
复制代码
2.代码引用该帖子中附件js文件
  1. <script type="text/javascript" src="getMapLib.js"></script>
复制代码
3.修改getMapLib.js中的【http://60.191.206.42:3000/maplite/】为内部图吧地图服务器的地址即可。

4.可直接下载附件查看完整示例程序。

5.其他地图功能实现可参考图吧在线地图示例即可。

二、示例代码

1.完整代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  5.     <!--base href="http://union.mapbar.com"-->
  6.         <title>Mapbar 地图 JavaScript API 示例: 地图标注</title>

  7.         <script type="text/javascript" src="getMapLib.js"></script>
  8.         <script type="text/javascript">
  9.                 var maplet = null;
  10.                 function initMap(){
  11.                         maplet = new Maplet("mapbar");
  12.                         maplet.centerAndZoom(new MPoint(116.38672,39.90805), 8);
  13.                         maplet.addControl(new MStandardControl());

  14.                         var marker = new MMarker(
  15.                                 new MPoint(116.38672,39.90805),
  16.                                 new MIcon("/apidoc/images/tb1.gif",32,32)
  17.                         );

  18.                         maplet.addOverlay(marker);
  19.                 }
  20.         </script>
  21. </head>

  22. <body onload="initMap()">
  23. <p>本示例中,地图中心点为天安门,并在中心点上添加一个标注。</p>
  24. <div id="mapbar" style="width:600px;height:500px"></div>
  25. <textarea name="code" class="Html" style="display:none;" execbutton="no">
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml">
  28. <head>
  29.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  30.     <!--base href="http://union.mapbar.com"-->
  31.         <title>Mapbar 地图 JavaScript API 示例: 地图标注</title>
  32.     <link href="/apidoc/style/sh.css" rel="stylesheet" type="text/css"/>
  33.     <script type="text/javascript" src="/apidoc/js/tools.js"></script>
  34.     <script type="text/javascript" src="/apidoc/js/sh.js"></script>
  35.         <script type="text/javascript" src="/apis/maps/free?f=mapi&v=31.2&k=keycode "></script>
  36.         <script type="text/javascript">
  37.                 var maplet = null;
  38.                 function initMap(){
  39.                         maplet = new Maplet("mapbar");
  40.                         maplet.centerAndZoom(new MPoint(116.38672,39.90805), 8);
  41.                         maplet.addControl(new MStandardControl());

  42.                         var marker = new MMarker(
  43.                                 new MPoint(116.38672,39.90805),
  44.                                 new MIcon("/apidoc/images/tb1.gif",32,32)
  45.                         );

  46.                         maplet.addOverlay(marker);
  47.                 }
  48.         </script>
  49. </head>

  50. <body onload="initMap()">
  51. <div id="mapbar" style="width:600px;height:500px"></div>
  52. </body>
  53. </html>
  54. </textarea>
  55. <script type="text/javascript">

  56.     bindEvent(window, "load", function() {
  57.                 dp.SyntaxHighlighter.ClipboardSwf = '/apidoc/js/clipboard.swf';
  58.                 dp.SyntaxHighlighter.HighlightAll("code", true, true, false, false, false);
  59.         });

  60. </script>

  61. </body>
  62. </html>
复制代码

三、附件下载

1.附件下载: 图吧离线地图示例.rar (80.05 KB, 下载次数: 0, 售价: 5 金币)
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|浙公网安备 33010502002149号|心得网 ( 浙ICP备14018598号

GMT+8, 2017-11-22 21:07 , Processed in 0.116975 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表