如何在网页中调用百度地图api

如题所述

1.进入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)

切换城市,搜索需标注位置。(如下图:)

设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。

添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。(如下图:)
步骤阅读
完成以上4步后,点获取代码。

获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用。)
1.在<head></head>间插入下面代码:这是样式和JS脚本。
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

2.在<body></body>间需要显示地图的位置放入以下代码:(该代码调用地图)
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
3.以下代码放在页面最底端(其实可放在页面任意位置。)
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}

//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(115.949652,28.693851);//定义一个中心点坐标
map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}

//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}

//标注点数组
var markerArr = [{title:"百恒网络",content:"电话:0791-88117053<br/>手机:15079002975",point:"115.950312|28.693447",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}

initMap();//创建和初始化地图
</script>

当然,如果你想偷懒,将以上对应代码全放在<body></body>间也是没问题的,呵呵。
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-11-16
1.进入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)

切换城市,搜索需标注位置。(如下图:)

设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。

添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。(如下图:)
步骤阅读
完成以上4步后,点获取代码。

获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用。)
1.在<head></head>间插入下面代码:这是样式和JS脚本。
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

2.在<body></body>间需要显示地图的位置放入以下代码:(该代码调用地图)
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
3.以下代码放在页面最底端(其实可放在页面任意位置。)
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}

//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(115.949652,28.693851);//定义一个中心点坐标
map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}

//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}

//标注点数组
var markerArr = [{title:"百恒网络",content:"电话:0791-88117053<br/>手机:15079002975",point:"115.950312|28.693447",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}

initMap();//创建和初始化地图
</script>
第2个回答  2015-11-25
首先要去百度地区的API开放平台哪里,生成你的地址,指定好显示方式。然后在你的网页模板的前台代码里边,把刚才复制的代码放到你要的位置,然后生成更新网页,就可以了。如果你不知道怎么调网页,放在哪个位置合适,在前台页面按F12查看,然后左下角有个选择按钮,点击你想放的位置,就能看到代码是多少,然后去编辑代码的地方找到这个地方,把地图代码复制进去就可以了。你可以加我 幺幺二六六幺幺幺 希望你采纳
第3个回答  2015-01-31
1.5之前的版本可以添加引用这个
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
后面的需要密钥,密钥可以自己去搜索百度地图API注册
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>本回答被提问者和网友采纳
第4个回答  2015-11-07
直接下载软件

如何在网页中调用百度地图api
1. 在百度搜索框输入“百度地图api”查找到百度地图api的网站 2.进入到上图的百度地图api首页 3.把网页滚动到下面可以看见“申请密钥”功能 4.点击“申请密钥”按钮,进入登陆界面。没有百度帐号则注册一个。注册后继续跳到登录界面 5.成功登录则进入后台管理界面 6.点击创建应用,则跳到创建应用界面 ...

如何在网站中加入百度地图如何在网站中加入百度地图导航
1. 登录百度地图开放平台,创建一个地图实例。2. 在地图编辑界面,设置起始点和终点,以及所需的路线规划参数。3. 使用提供的API调用,通过编写JavaScript代码,将地图和导航路线嵌入到你的网页中。4. 在你的网站源代码中,引入百度地图API和相关JavaScript代码。5. 通过百度地图开放平台的API,你可以自...

如何调用百度地图接口如何调用百度地图接口导航
第一步:进入http:\/\/api.map.baidu.com\/lbsapi\/creatmap\/,百度地图制作网站,搜索出你想要展示的地点。第二步:设置地图。您可以设置网站上显示的地图的宽度和高度,其他选项保持不变。第三步:添加注释。点击第一个图标后,在右边找到自己的位置,点击鼠标左键定位。您可以更改标记处图标的形状、名称和...

如何在网页中调用百度地图api
1.进入:http:\/\/dev.baidu.com\/wiki\/static\/map\/API\/tool\/creatMap\/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)切换城市,搜索需标注位置。(如下图:)设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。添加标注:点击第一个图标后,在右侧找到自己的位置,...

怎么在网页中加入百度地图怎么在网页中加入百度地图导航
要在网页中加入百度地图,首先应访问百度地图官方网站。在网站上,您可以输入想要显示地图的初始位置,并通过点击“查找”按钮来定位。接着,找到所需的地图区域并点击底部“获取代码”按钮以获取地图的HTML代码。回到您的网页编辑环境,创建一个新的HTML文件,并将所获取的代码粘贴进去,这样就可以在网页上...

网页内如何调用开放的api接口实现用户定位
网页内调用开放的api接口实现用户定位的步骤如下:以百度地图为例1、百度直接搜【百度地图调用】,点击出现的第二个网站,进入这个网站即可;2、进入这个网站后,我们首先得输入自己需要定位的地点。比如我们输入【上海】这个城市,输入后点击【查找】选项;3、经过上一步的操作,我们已经成功地定位到【上海...

如何在网页中调用百度地图api
1、登录百度地图api,地址:2、设置你的地理位置3、简单设置下地图功能,也可以不设置。4、设置地图信息标注5、设置以后查看效果6、获取代码,以上都设置好了以后,就可以获取地图代码了7、复制地图代码插入到网站的页面源文件中

如何在网页中添加百度地图如何在网页中添加百度地图导航
1、首先打开百度地图,点击左上角“头像”图标选项。2、然后在新弹出来的页面中点击“常用地址”选项。3、之后在新弹出来的页面中点击“点击设置”选项。4、然后在新弹出来的页面中点击“我的位置”选项。5、最后在该页面中即可看到已经设置好家的位置了。如何在百度地图上设置地标?在百度地图上设置...

如何在网页中引入百度地图?
1.首先,到百度地图开放平台注册一下开发者,这个直接用自己的百度账号就行,接着点击“控制台”->“创建应用”,如下,这里选择“浏览器端”,输入“应用名称”:创建成功后,就会跳转到“应用列表”,刚才创建的应用就会显示出来,如下,这里我们需要记住AK这个值,后面的html页面中需要用到:2.应用...

如何在前端网页中调用第三方地图API,实现网页中显示地图信息?
调用百度地图API 1.首先,也是注册百度地图开发者,这个直接到官网上注册就行,或者直接使用百度账号登陆,点击右上角的“控制台”,进入用户界面,接着点击“创建应用”按钮,弹出如下界面,输入应用名称,因为是前端网页引入,所以这里我们选择“浏览器端”:2.应用创建成功后,就会为当前的应用生成一个AK...

相似回答