分享【地图制作】详细代码说明和效果图，可实现当前各种地图

晓风残月0110 2008-09-04 01:03:07

这个站点是一个地图制作网站，也叫炫地图，在google，百度搜索一下会有很多结果。

可以制作各种各样的地图，如在地图上进行位置点标注、路线规划以及区域圈选等，并可以将标注后的地图通过多种渠道展现给其他网友。也可以制作博客地图。

接口都已写好，只使用js就可以了，可以先看一下效果
火热冰城奥运1
奥运2
裸泳海滩

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"}]'; 



mapObj.importMapData(json);

var json1 = '[{"coordX":"JJOMWKHOOTLLLL","coordY":"MMGVUMQULHHLP","contents":"<TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">梦想照进现实</FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/1.png","imageArray":["start","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882413883.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882421287.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882429350.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img20079288244292.jpg","end"],"notStyleContent":"梦想照进现实","serialid":"bd0131ce-42f9-46d3-2f64-4C066EDAb216","titles":"老徐写真","setTop":true,"gType":"pp_mc"}]'; 



mapObj.importMapData(json1);

</script>





</body>

</html>

2 博客地址代码，可直接用于自定义模块内



<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>