7093人阅读
百度地图（14）
本文将向大家介绍百度地图API的两种不同加载方式：同步加载和异步加载。
这是最常见的加载方式，开发者需要在页面的head标签内添加一个script标签，标签的src属性填写为地图API的地址：
&script src=&http://api./api?v=1.2&&&/script&
此时脚本是同步加载的，如果直接在浏览器敲入这个地址你会发现这段js脚本实际返回的内容为：
document.write('&link rel=&stylesheet& type=&text/css& href=&http://api./res/12/bmap.css&/&');
document.write('&script type=&text/javascript& src=&http://api./getscript?v=1.2&key=&services=&t=&&&/script&');
返回的脚本通过document.write方法写入了一个link标签和另一个script标签，link标签负责加载API的样式表文件，而另一个script则是地图API真正的脚本资源。当然你也可以把脚本写在body标签内，但是从规范角度来说不建议这么写（html4规范上规定link标签只能存在于head标签内）。一个完整的同步加载的代码示例如下：
&!DOCTYPE html&
&meta charset=&utf-8&/&
&title&同步加载&/title&
&script src=&http://api./api?v=1.2&&&/script&
&div id=&map& style=&width:500height:320&&&/div&
var map = new BMap.Map(&map&);
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
我们看到在地图容器#map之后，立刻插入了一个script标签，标签内直接编写调用API的代码，效果如图：
浏览器先加载API的资源然后再加载页面其他元素，通过资源加载顺序图可以更清晰的看到这一点：
注意这里的蓝色竖线出现在API脚本加载（包括网络时间和执行时间）完以后，这就表明了页面正在同步加载API的JS脚本。此外还看到在加载主脚本的同时浏览器是被阻塞住的，不能加载其他页面资源。当然API也在逐渐努力减少同步加载JS的文件大小，这除了让地图本身展现速度更快以外，还能最大限度的减少对第三方页面的影响。
如果使用地图的页面内容较多，而地图仅是一个小模块时，可以考虑将API脚本放在body的最后，而地图初始化放在body的onload事件中：
&!DOCTYPE html&
&meta charset=&utf-8&/&
&title&同步加载&/title&
function initialize(){
var map = new BMap.Map(&map&);
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
&body onload=&initialize()&&
&div id=&map& style=&width:500height:320&&&/div&
&script src=&http://api./api?v=1.2&&&/script&
这样API的脚本不会影响页面其他元素，虽然用法不太规范。
API支持完全异步加载，使用方式如下：
&!DOCTYPE html&
&meta charset=&utf-8&/&
&title&异步加载&/title&
&script type=&text/javascript&&
function initialize() {
var mp = new BMap.Map('map');
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
function loadScript() {
var script = document.createElement(&script&);
script.src = &http://api./api?v=1.2&callback=initialize&;
document.body.appendChild(script);
window.onload = loadS
&div id=&map& style=&width:500height:320px&&&/div&
我们通过动态创建script标签的方式来添加对地图API的引用，此时API脚本是异步加载的，如果直接在浏览器输入这个地址，我们会得到下面代码：
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'http://api./res/12/bmap.css');
document.getElementsByTagName('head')[<span style="color:#].appendChild(link);
window.BMap = window.BMap || {};
window.BMap.apiLoad = function () {
delete window.BMap.apiL
if (typeof initialize == &function&) {
initialize()
var s = document.createElement('script');
s.src = 'http://api./getscript?v=1.2&key=&services=&t=';
document.body.appendChild(s);
代码里没有了document.write，而是createElement动态添加。
我们还需要在引用地址里面添加callback参数，这是在告诉API加载完成后需要调用什么方法来初始化地图。注意这个方法名必须是全局可见的。此时我们再来看一下资源加载的瀑布图：
虽然资源总数没有什么变化，但是会发现蓝线和红线的位置都大大提前，这就说明地图API脚本是异步加载的，对页面元素的加载没有任何影响。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：298503次
积分：3842
积分：3842
排名：第5627名
原创：84篇
转载：51篇
评论：54条
(5)(8)(2)(3)(9)(1)(2)(36)(1)(2)(1)(4)(2)(1)(13)(21)(7)(1)(6)(3)(3)(3)(2)百度地图api 移动标注
&!doctype html&&html&&head&&meta http-equiv=content-type content=text/ charset=utf-8 /&&title&百度地图&/title&&script type=text/javascript&var iscreatr=function initialize() {var x = 116.4035;//设置默认标注点xvar y = 39.915;//设置默认标注点y//---------------------------------------------基础示例---------------------------------------------var map = new bmap.map(allmap,{minzoom:12,maxzoom:20});// 创建map实例，将地图挂到那个容器，用id表示map.centerandzoom(new bmap.point(x,y),15); &//初始化时，即可设置中心点和地图缩放级别。//map.centerandzoom(成都,13); & & & & & & & & & & // 初始化地图,设置中心点坐标和地图级别。map.enablescrollwheelzoom(true);//鼠标滑动轮子可以滚动var point = new bmap.point(x,y);//默认// 创建标注对象并添加到地图 &var marker = new bmap.marker(point); &var label = new bmap.label(默认提示,{offset:new bmap.size(20,-10)});&marker.setlabel(label)&map.addoverlay(marker); &&marker.enabledragging(); & &//可拖拽&marker.addeventlistener(dragend, function(e){//将结果进行拼接并显示到对应的容器内document.getelementbyid(r-result).innerhtml = e.point.lng + ,
+ e.point.//打印拖动结束坐标&});}&function loadscript() {&& var script = document.createelement(script);&& script.src = http://api./api?v=1.4&callback=&& document.body.appendchild(script);}&window.onload =&/script&&/head&&&body&&div id=r-result style=float:width:100&坐标&/div&&div id=allmap style=width: 800 height: 500px&&/div&&/body&&/html&更多网页制作信息请查看：如何在一个页面显示多个百度地图
字体：[ ] 类型：转载 时间：
经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。
以下是在页面加入两个地图的效果：
页面核心代码如下:
代码如下:&style type="text/css"&#mapDiv1 { height:400 width:600 }#mapDiv2 { height:400 width:600 left:620 top:-420}&/style&&body&&div id="mapDiv1" &&/div&&br /&&div id="mapDiv2" &&/div&&/body&&/html&&script type="text/javascript"&//地图初始化
var map1 = new BMap.Map("mapDiv1");map1.centerAndZoom(new BMap.Point(116..);map1.enableScrollWheelZoom();
var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图map2.centerAndZoom(new BMap.Point(116..);map2.enableScrollWheelZoom();&/script&
以上代码可以实现在同一页面显示两幅并排的地图，如果想要实现拖拽、缩放左边的地图，右边的地图也随着移动、缩放，则只需要给左边的地图注册zoomend和moveend事件即可，代码如下：
代码如下:map1.addEventListener("zoomend", function () {map2.zoomTo(map1.getZoom());map2.panTo(map1.getCenter());});
map1.addEventListener("moveend", function () {map2.zoomTo(map1.getZoom());map2.panTo(map1.getCenter());});
完整代码如下：
代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&script type="text/javascript" src="http://api./api?v=1.4"&&/script&&title&地图接口&/title&&/head&&style type="text/css"&#mapDiv1 { height:400 width:600 }#mapDiv2 { height:400 width:600 left:620 top:-420}&/style&&body&&div id="mapDiv1" &&/div&&br /&&div id="mapDiv2" &&/div&&/body&&/html&&script type="text/javascript"&//地图初始化 var map1 = new BMap.Map("mapDiv1");map1.centerAndZoom(new BMap.Point(116..);map1.enableScrollWheelZoom();
var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图map2.centerAndZoom(new BMap.Point(116..);map2.enableScrollWheelZoom();
map1.addEventListener("zoomend", function () {map2.zoomTo(map1.getZoom());map2.panTo(map1.getCenter());});
map1.addEventListener("moveend", function () {map2.zoomTo(map1.getZoom());map2.panTo(map1.getCenter());});
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具百度地图API 怎样实现根据起点和终点点击查询能出现路线？代码如下
html&&br&&head&&br&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&&br&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&&br&
&style type=&text/css&&&br&
body, html {width: 100%;height: 100%; margin:0;font-family:&微软雅黑&;}&br&
#allmap{height:500width:100%;}&br&
#r-result,#r-result table{width:100%;}&br&
&/style&&br&&br&&br&
&title&根据起终点名称驾车导航&/title&&br&&/head&&br&&body&&br&
&style type=&text/css&&.qmbox body,.qmbox html{width: 100%;height: 100%;margin:0;font-family:&微软雅黑&;}&br&.qmbox #allmap{height:700width:100%;}&br&.qmbox #r-result{width:100%; font-size:14}&br&&/style&&br&&br&&br&
&div id=&allmap&&&/div&&br&
&div id=&r-result&&&br&
起点: &input id=&start& type=&text& style=&width:100 margin-right:10&
终点: &input id=&end& type=&text& style=&width:100 margin-right:10&
&input type=&button& value=&查询&
&/div&&br&&br&&br&&/body&&br&&/html&&br&&script type=&text/javascript&&&br&
// 百度地图API功能&br&
var map = new BMap.Map(&allmap&);&br&
var start = &start&;&br&
var end = &end&;&br&
map.centerAndZoom(new BMap.Point(110.79, 32.65), 11);&br&
$(&#result&).click(function(){&br&
map.clearOverlays(); &br&
var i=$(&#driving_way select&).val();&br&
search(start,end,routePolicy[i]); &br&
function search(start,end,route){ &br&
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});&br&
driving.search(start,end);&br&
});&br&&/script&
html&&head&
&meta http-equiv="Content-Type" content="text/ charset=gb2312"&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&style type="text/css"&
body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#allmap{height:500width:100%;}
#r-result,#r-result table{width:100%;}
&title&根据起终点名称驾车导航&/title&&/head&&body&
&style type="text/css"&.qmbox body,.qmbox html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}.qmbox #allmap{height:700width:100%;}.qmbox #r-result{width:100%; font-size:14}&/style&…
按投票排序
你去百度地图的api论坛问吧如果你找不到，倒是可以试试高德的sdk
可以尝试一下百度地图的导航功能：第七条：线路规划：
已有帐号？
无法登录？
社交帐号登录