百度公司像google,sogou百度地图时光机在哪一样,拥有一套属于自己独立的地图系统,该系统可以通过一个统一的接口“baidu map API",将地图内置于任何一个页面中。“baidu map API"的使用和设置分为3个步骤:申请baidu map API key文件、在页面中放入代码、设置自己需要的参数。其过程如下:
1、在“openapi.baidu/map/index.html”中,注册百度地图API,然后输入需要内置百度地图页面的URL地址,生成API密钥(前提是拥有1个百度帐号并已登陆),将KEY文件复制保存。然后将“地图API调用示例”放入页面代码里。“地图API调用”源码为:<script type="text/javascript" src="api.map.baidu/api?key=*&v=1.0&services=true" ></script> [说明:*号代表注册得到的key,以下同]
2、这时,在页面中并不会出现内置的百度地图,还需要用html语言,让地图从程序转为对象。其源码为:
<script type="text/javascript" src="api.map.baidu/api?key=*&v=1.0&services=true" ></script>
<script type="text/javascript" src="api.map.baidu/api?key=*&v=1.0&services=true" ></script>
<div id="containe
r"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
AndZoom(new BMap.Point(473.555555,10.397247), 17);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("西安市七斜西路");
</script>
<script type="text/javascript">
var map = new BMap.Map("container");
AndZoom(new BMap.Point(473.555555,10.397247), 17);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("西安市七斜西路");
</script>
3、该代码的个人设置如下:
第1行把baidu map API 程序植入源码中;
第2行在页面中设置一个标签,宽度,长度可以自己调整;border为该标签外框的性质,1p
第1行把baidu map API 程序植入源码中;
第2行在页面中设置一个标签,宽度,长度可以自己调整;border为该标签外框的性质,1p
x为1个像素宽度,solid为实线,gray为边框显示颜,margin-top为该标签距离与上部的距离。
第5行为地图中自己位置的坐标(如果不清楚自己位置的坐标,可以上google map查)。
第6~8行为植入地图缩放控制工具
第9~12行为地图中自己的位置,只需在local search后填入自己的位置名称(注:该位置必须是在百度地图中有的,也就是说如果百度地图没有收录你想显示的位置,很抱歉,无法标记,只能一个接近的地点做为自己的位置,可以自己先上百度地图搜索一下看地址是否存在)。
第5行为地图中自己位置的坐标(如果不清楚自己位置的坐标,可以上google map查)。
第6~8行为植入地图缩放控制工具
第9~12行为地图中自己的位置,只需在local search后填入自己的位置名称(注:该位置必须是在百度地图中有的,也就是说如果百度地图没有收录你想显示的位置,很抱歉,无法标记,只能一个接近的地点做为自己的位置,可以自己先上百度地图搜索一下看地址是否存在)。
上面这段源码可以放入想让地图在页面中显示的任意位置。
发布评论