导航:首页 > 编程语言 > 百度地图html代码

百度地图html代码

 发布时间：2023-11-29 06:08:51

❶ html5实现地图上定位导航路线

HTML5+JQM即可实现

参考方法：
1.先去通过网络拾取坐标系统获得点位的坐标
http://api.map..com/lbsapi/getpoint/index.html

2.在网页的<head>中插入网络API引用脚本。
<script type="text/javascript" src="http://api.map..com/api?

key=&v=1.1&services=true"></script>

3.在网页的</body>之后</html>之前插入地图显示代码

4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要

增加一个高度值，一般情况600px就可以

注意事项：

1. var point = new BMap.Point(120.524011,36.395728); 这是定义中心店坐标

2. map.centerAndZoom(point,15); 这个据我调试 应该是控制地图比例缩放的

3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的

demo是没有这个东西滴，所以呢当跳转到地图的页面时候 是不会显示你定位的中心

点的 但是由于我的聪明和机智 各种装孙子求助大神 才得知了这个大神不削一顾

的属性 ：设定地图加载后1秒调至中心点 。。最后强调下

低调 一定要低调。。。

4. function createIcon(json){
var icon = new BMap.Icon("images/map_icon.png", 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;
} 这里就是创建一个icon

5. var markerArr = [{title:"西程村",content:"青岛市即墨市蓝鳌路 电话：

123123123213",point:"120.524011|36.395728",isOpen:0,icon:

{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 这里呢 就是设置定位的信息

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

如何创建一个网页文件
怎样利用网络地图API建立一张2D地图，以及3D地图
如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中，保存文件为bank1-1.htm文件。
点击这里运行程序。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——网络地图API学习</title>
</head>
<body>
在这里填入你的地图程序
</body>
</html>

二、使用网络地图API建立一张简单的地图

1、引用API的js，放置bank1-1.htm的<head></head>中
说明：
v=1.1这是API的版本，表明是1.1版本的。
sercices=false是指，不开启地图服务，例如公交驾车查询等。

<script type="text/javascript" src="http://api.map..com/api?v=1.1&services=false"></script>

2、设置地图容器的样式，放置<head></head>中
说明：
制定容器高度后，方能显示出地图。

<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:100%}
</style>

你还可以自己规定容器的高度、宽度，边框颜色等。比如

<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>

3、在<body></body>中放置地图容器
说明：id号是唯一的，在创建地图的js中，要与此id对应起来。

<div id="milkMap"></div>

4、在</body></html>中放置自己的js
说明：
创建地图使用new BMap.Map，创建点使用new BMap.Point。
创建地图需要设置地图中心点，与地图级别。1级最大，能看见全球；18级最小，最详细。
其中地图级别的对应关系为，4级-国； 8级-省， 12级-市， 18级-街道。

<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>

4、一张2D地图就创建完毕了。接下来，你可以运行你的地图程序。
点击这里运行程序。

三、制作3D地图
说明：

说明：
使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。设置3D地图，需要首先setCurrentCity，设置当前城市。
目前，只支持北上广深四个城市的3D图。
点击这里运行程序。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——网络地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map..com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别

map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市

</script>
</html>

四、添加对地图进行鼠标和键盘操作的功能
开启滚轮缩放功能，该功能默认是禁用的。
关闭双击放大功能,该功能默认是开启的。

enableScrollWheelZoom(); //开启滚轮缩放功能
disableDoubleClickZoom(); //关闭双击放大功能

开启键盘操作功能，该功能默认禁用。
键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。

enableKeyboard(); //开启键盘操作功能

下面我们来看一下完整的程序。点击这里运行程序。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——网络地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map..com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>开启滚轮缩放</p>
<p>关闭双击放大</p>
<p>开启键盘操作</p>
<p>说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。</p>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别

map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市

map.enableScrollWheelZoom(); //开启滚轮缩放功能
map.disableDoubleClickZoom(); //关闭双击放大功能

map.enableKeyboard(); //开启键盘操作功能
</script>
</html>

❸ 调用百度地图API怎么获取坐标点的地理位置

一.首先引入所申请的ak密钥
<script type="text/javascript" src="http://api.map..com/api?ak=&v=2.0&services=false"></script>
二.简单样式处理一下
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}
三.html代码布局
//下面的代码是用来显示地图的
<div id="map"></div>
四.js代码如下
//创建Map地图实例
var map = new BMap.Map("allmap");
//设置中心点坐标
var point = new BMap.Point(116.331398,39.897445);
//初始化地图
/**
*地图类型：
*普通地图：BMAP_NORMAL_MAP
*卫星地图：BMAP_HYBRID_MAP
*/
var map = new BMap.Map("map",{mapType:BMAP_NORMAL_MAP,minZoom:1,maxZoom:18}); //设置地图类型及最小最大级别
//设置地图级别（1-18）
map.centerAndZoom(point,12);
//开启滚轮缩放地图
map.enableScrollWheelZoom();
//进行浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
// 定位成功事件
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//alert('您的位置：'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng, +r.point.lat);
}
},{enableHighAccuracy: true})
//addEventListener--添加事件监听函数
//click--点击事件获取经纬度
map.addEventListener("click",function(e){
prompt("鼠标单击地方的经纬度为：",e.point.lng + "," + e.point.lat);
});

❹ 如何在html网页中引入百度街景地图

这里简单介绍一下吧，其实和引入普通的网络地图差不多，唯一的区别就是要开启FlashPlayer，不然街景地图就不能正常显示，下面我介绍一下实现过程，主要内容如下：

1.注册网络地图开发者，这个直接到官网注液庆册就行，或者使用网络账号直接登录也行，登录成功后，依次点击“控制台”->“创建应用”，在跳高纯转的页面选择“浏览器端”，输入应用名称，设置白名单，如下：

创建成功后，当前的应用就会显示在应用列表中，这里我们需要记住应用的AK值，后面的html代码中需要用到，如下：

2.创建成功后，我们就可以在网页中引入街景地图了，主要是创建一个div容器，然后通过JSAPI引入街景地图到这个容器中，测试的完整代码如下，这里创建了2个div容器，一个用于显示街景地图，一个用于显示普通地图，两者同时变换：

用浏览器打开这个html网页，效果如下，上面为显示的街景地图，下面为对应的普通地图，这里需要开启浏览器的FlashPlayer功能，不然会显示失败：

至此，我们就完成了在html页面中引入网络街景地图。总的来说，整个过程不难，和引入普通网络地图差不多，需要先注册开发者，然后创建应用，接着创建div容器，最后直接通过JSAPI引入地图到容器中就行，唯一的区别就是要开启浏览闹念握器FlashPlayer功能，不然街景地图就会显示失败，只要你有一定的前端基础，熟悉一下相关示例和代码，很快就能掌握的，官网提供了非常详细的开发文档，非常适合初学者，感兴趣的话，可以研究一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言。

❺ 百度地图 html怎么引入百度地图api

1.进入:http://dev..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..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..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>

❻ 百度地图在html中怎么自动定位

  1. 浏览器定位：http://lbsyun..com/jsdemo.htm#i8_1

  2. ip定位：http://lbsyun..com/jsdemo.htm#i8_2

  3. 城市名定位：http://lbsyun..com/jsdemo.htm#i8_3

  4. 经纬度定位：http://lbsyun..com/jsdemo.htm#i8_4

    以上定位均需自己申请api秘钥


❼ html5让地图全屏 ，百度地图生成的代码，怎么改成全屏

<script type="text/javascript" src="http://api.map..com/api?v=2.0&ak=您的密匙"></script>这里没有调用api所以就不能显示了，你要有秘钥才能显示。
设置全屏的话把width和height设成当前屏幕的高和宽就可以了

阅读全文

与百度地图html代码相关的资料

热点内容
主板无vga插槽怎么连接编程器 浏览：521
录视频文件在哪里删除 浏览：881
word2013如何插入文件 浏览：233
proe教程百度网盘 浏览：197
如何控制远程linux服务器 浏览：740
it教学app有哪些 浏览：34
怎么在ps抠的图变成矢量文件 浏览：405
口袋妖怪银魂安卓v11 浏览：1
网站上芒果tv的账号都是什么 浏览：104
带公式的表格如何刷新数据 浏览：81
数据标注语音和2d哪个好 浏览：145
保存excel文件的方法 浏览：655
手机上看不到电脑上的文件 浏览：626
关于ps的微信公众号 浏览：612
矩阵论教程 浏览：971
字体文件分系统吗 浏览：921
编程一级考试要带什么证件 浏览：923
extjs表格修改前数据 浏览：612
什么是数据库的函数 浏览：722
oppo手机怎么用数据线连接电脑 浏览：247

友情链接