【地图制作】详细代码说明和效果图,可实现当前各种地图
2008-09-04 14:07
465 查看
应用第三方地图制作,这个站点是一个地图制作网站,也叫炫地图,在google,百度搜索一下会有很多结果。
通过该站提供的接口,可以制作各种各样的地图,如在地图上进行位置点标注、路线规划以及区域圈选等,并可以将标注后的地图通过多种渠道展现给其他网友。也可以制作博客地图。
只使用js就可以了,接口都已写好,可以先看一下效果
火热冰城:http://diy.mapabc.com/view/ff808081-1b7d5da3-011b-9613bfbb-00db.shtml
奥运首金:http://diy.mapabc.com/view/4028811d-1b9c582d-011b-a5bd82d5-0028.shtml
奥运二金:http://diy.mapabc.com/view/40288118-1b9c5059-011b-a672eea2-002a.shtml
裸泳海滩:http://diy.mapabc.com/view/40288118-1b9c5059-011b-9db90cff-0005.shtml
1 项目样例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script>
</head>
<body>
<div id="mapObj" style="width: 600px; height: 400px">
</div>
<script type="text/javascript">
//创建一个MmapOptions对象
var mapOptions = new MMapOptions();
//设置地图组件的Id
mapOptions.mapId = "fmptest";
//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;
//设置地图的中心点
mapOptions.center = new MLatLng("MMGVSTJTRHDHL","JJOMWKHONTPHLH");
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
function editMode(){
//设置地图为编辑模式
mapObj.setMapMode(MMapMode.EDIT);
}
/**
说明:
把使用exportMapData 方法导出的点、线、面数据导入到当前地图。导入的数据是
JSON格式字符串,因此使用此功能时需要在页面里添加一些JSON工具,如prototype.js
(1.5.1 以后的版本)。
注意:不要使用json.js,这个脚本与FMP 有冲突。
参数:
data:
说明:导入的数据,是一个JSON 字符串。
类型:String
**/
var json = '[{"coordX":"JJOMWKHOOTLLLL","coordY":"MMGVSSNVKHDHH","contents":"<TEXTFORMAT LEADING=//"2//"><P ALIGN=//"LEFT//"><FONT FACE=//"宋体//" SIZE=//"12//" COLOR=//"#000000//" LETTERSPACING=//"0//" KERNING=//"0//">晨报讯(记者 杨莲洁) 前天,徐静蕾做客MapABC图盟科技,和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首,老同学一起回忆过去,想起当年同学的旧事,徐静蕾不禁泪如雨下,一旁的同学刘孜也陪同伤感落泪。</FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/redbubble.swf","imageArray":["http://res.mapabc.com/mymaps/img/2007/9/28/img200792882044185.jpg"],"notStyleContent":"晨报讯(记者 杨莲洁) 前天,徐静蕾做客MapABC图盟科技,和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首,老同学一起回忆过去,想起当年同学的旧事,徐静蕾不禁泪如雨下,一旁的同学刘孜也陪同伤感落泪。","serialid":"4c159459-7251-56ae-c1c3-4C033095c979","titles":"Ales","setTop":true,"gType":"pp_mc"}]';
//将json的值写成一行
mapObj.importMapData(json1);
</script>
</body>
</html>
2 博客地址代码,<embed>中内容可直接用于博客的自定义模块内
<table>
<tr>
<td align="center">
<a href="http://diy.mapabc.com/view/ff808081-1b7d5da3-011b-9613bfbb-00db.shtml">博图放大</a></td>
</tr>
<tr>
<td>
<embed allowscriptaccess="never" allownetworking="internal" align="middle" src="http://api.mapabc.com/fmp/v1.0/minimap/minimap.swf"
width="188px" height="203px" type="application/x-shockwave-flash" flashvars="zoeyAllW=190&zoeyAllH=203&zoeyLevelThick=25&zoeyPlumbThick=15&zoeyColor=0x330000&minimapid=4028811e-1b926478-011b-96a7619e-0036"
quality="high" bgcolor="#523008"></embed></td>
</tr>
<tr>
<td>
<iframe name="torch_relay_map_api" src="http://diy.mapabc.com/views.htm?id=ff808081-1b7d5da3-011b-9613afd7-00da"
width="300px" height="300px" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" /> </iframe>
</td>
</tr>
</table>
注意:1 地图的中心点大家可以设置成自己要设置的地方
在这取地址:http://code.mapabc.com/tool.shtml 2 第一段代码如果大家真的想在项目中使用,需要大家注册一下,就不会有key那个提示了。
通过该站提供的接口,可以制作各种各样的地图,如在地图上进行位置点标注、路线规划以及区域圈选等,并可以将标注后的地图通过多种渠道展现给其他网友。也可以制作博客地图。
只使用js就可以了,接口都已写好,可以先看一下效果
火热冰城:http://diy.mapabc.com/view/ff808081-1b7d5da3-011b-9613bfbb-00db.shtml
奥运首金:http://diy.mapabc.com/view/4028811d-1b9c582d-011b-a5bd82d5-0028.shtml
奥运二金:http://diy.mapabc.com/view/40288118-1b9c5059-011b-a672eea2-002a.shtml
裸泳海滩:http://diy.mapabc.com/view/40288118-1b9c5059-011b-9db90cff-0005.shtml
1 项目样例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script>
</head>
<body>
<div id="mapObj" style="width: 600px; height: 400px">
</div>
<script type="text/javascript">
//创建一个MmapOptions对象
var mapOptions = new MMapOptions();
//设置地图组件的Id
mapOptions.mapId = "fmptest";
//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;
//设置地图的中心点
mapOptions.center = new MLatLng("MMGVSTJTRHDHL","JJOMWKHONTPHLH");
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
function editMode(){
//设置地图为编辑模式
mapObj.setMapMode(MMapMode.EDIT);
}
/**
说明:
把使用exportMapData 方法导出的点、线、面数据导入到当前地图。导入的数据是
JSON格式字符串,因此使用此功能时需要在页面里添加一些JSON工具,如prototype.js
(1.5.1 以后的版本)。
注意:不要使用json.js,这个脚本与FMP 有冲突。
参数:
data:
说明:导入的数据,是一个JSON 字符串。
类型:String
**/
var json = '[{"coordX":"JJOMWKHOOTLLLL","coordY":"MMGVSSNVKHDHH","contents":"<TEXTFORMAT LEADING=//"2//"><P ALIGN=//"LEFT//"><FONT FACE=//"宋体//" SIZE=//"12//" COLOR=//"#000000//" LETTERSPACING=//"0//" KERNING=//"0//">晨报讯(记者 杨莲洁) 前天,徐静蕾做客MapABC图盟科技,和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首,老同学一起回忆过去,想起当年同学的旧事,徐静蕾不禁泪如雨下,一旁的同学刘孜也陪同伤感落泪。</FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/redbubble.swf","imageArray":["http://res.mapabc.com/mymaps/img/2007/9/28/img200792882044185.jpg"],"notStyleContent":"晨报讯(记者 杨莲洁) 前天,徐静蕾做客MapABC图盟科技,和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首,老同学一起回忆过去,想起当年同学的旧事,徐静蕾不禁泪如雨下,一旁的同学刘孜也陪同伤感落泪。","serialid":"4c159459-7251-56ae-c1c3-4C033095c979","titles":"Ales","setTop":true,"gType":"pp_mc"}]';
//将json的值写成一行
mapObj.importMapData(json1);
</script>
</body>
</html>
2 博客地址代码,<embed>中内容可直接用于博客的自定义模块内
<table>
<tr>
<td align="center">
<a href="http://diy.mapabc.com/view/ff808081-1b7d5da3-011b-9613bfbb-00db.shtml">博图放大</a></td>
</tr>
<tr>
<td>
<embed allowscriptaccess="never" allownetworking="internal" align="middle" src="http://api.mapabc.com/fmp/v1.0/minimap/minimap.swf"
width="188px" height="203px" type="application/x-shockwave-flash" flashvars="zoeyAllW=190&zoeyAllH=203&zoeyLevelThick=25&zoeyPlumbThick=15&zoeyColor=0x330000&minimapid=4028811e-1b926478-011b-96a7619e-0036"
quality="high" bgcolor="#523008"></embed></td>
</tr>
<tr>
<td>
<iframe name="torch_relay_map_api" src="http://diy.mapabc.com/views.htm?id=ff808081-1b7d5da3-011b-9613afd7-00da"
width="300px" height="300px" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" /> </iframe>
</td>
</tr>
</table>
注意:1 地图的中心点大家可以设置成自己要设置的地方
在这取地址:http://code.mapabc.com/tool.shtml 2 第一段代码如果大家真的想在项目中使用,需要大家注册一下,就不会有key那个提示了。
相关文章推荐
- 【清楚理解后台利用ireport到处报表的原理】ireport制作jasperreport报表详细过程(包括jsp端代码实现)
- ireport制作jasperreport报表详细过程(包括jsp端代码实现)
- 纯CSS3实现绘制各种图形实现代码详细整理
- html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 (可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码)
- 载入jQuery库的最佳方法详细说明及实现代码
- js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟
- 载入jQuery库的最佳方法详细说明及实现代码
- ireport制作jasperreport报表详细过程(包括jsp端代码实现)
- SDview-侧滑菜单实现,代码中有详细说明
- Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果
- Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果
- Javascript获得各种当前网页页面详细地址的实现
- MQTT协议的详细分析及各种平台代码实现(参考资料)
- Android使用GridView实现日历功能(详细代码)
- Android 代码混淆选项详细说明
- python实现的各种排序算法代码
- 实现变速回到当前顶部 JavaScript代码~!
- Js 获取当前日期时间及其它操作实现代码
- 安卓开发20:动画之Animation 详细使用-主要通过java代码实现动画效果
- JS实现网页标题栏显示当前时间和日期的完整代码