html5 网站开发实战本地wordpress
脚本请参见： 整合google,51ditu和mapbar的地图API
现在来说一下用html页面调用脚本
先载入3个地图的api脚本，如果要在网站使用，必须去地图的官方网站注册一个key才行。不过本地调试没问题(127.0.0.1或localhost)
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"></script>
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31&k=abcdef"></script>
IE的画线要使用VML 技术
<style type="text/css">
<!--
v/:*{Behavior:url(#default#VML);}
-->
</style>
调用地图API
<script type="text/javascript">
var map=null;
function mapload(maptype)
{
map=new myMap(
{
"divobj":"map",
"maptype":maptype,
"lat":36.144459040000,
"lng":120.416552501369994,
"scale":8
});
maplet=map.init(maptype);//针对Mapbar，必须定义此名称的全局变量
map.addPoint(36.0612508601570,120.380276441570004,"五四广场",true,{"title":"信息提示","mapbarlabel":"五四广场"});
map.addLine(36.144459040000,120.417052501369994,36.0612508601570,120.380276441570004);
}
</script>
页面的调用如下：
<body οnlοad="mapload('google')">
<input type="button" οnclick="map.removeAll()" value="清除全部" />
<input type="button" οnclick="map.removePointAll()" value="清除全部点" />
<input type="button" οnclick="map.removeLineAll()" value="清除全部线" />
<input type="button" οnclick="mapload('google')" value="使用google地图" />
<input type="button" οnclick="mapload('51Ditu')" value="使用51地图" />
<input type="button" οnclick="mapload('Mapbar')" value="使用Mapbar地图" />
<!--
地图显示容器,需要在创建地图对象前创建
地图的大小通过容器的属性获取, 修改容器的大小后需要调用 map.resize() 使地图适应容器的大小
-->
<div id="map" style="width: 500px; height: 300px"></div>