设置百度地图名片最后把代码嵌入哪里呢？
都说把代码嵌入自己的网站，但是能不能帮我截图详细的操作一下，我还是不懂嵌入到网站的哪里。嵌入百度地图吗？学校要开会，怕外面的与会人员会迷路，所以就是想做一个点开能导航的东...
都说把代码嵌入自己的网站，但是能不能帮我截图详细的操作一下，我还是不懂嵌入到网站的哪里。嵌入百度地图吗？学校要开会，怕外面的与会人员会迷路，所以就是想做一个点开能导航的东西，不让他们迷路呢！
展开
展开全部
按您的要求不仅要调用百度地图，而且要实现百度地图导航功能，那就只能使用百度地图开放平台的api调用了。
百度地图JavaScript API简介：
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先申请密钥（ak）才可使用。任何非营利性应用请直接使用，商业应用请参考使用须知。
具体方法如下：
一、创建百度地图开放平台密钥（ak）
1、去百度地图开放平台注册账户，或者有账户直接登陆申请密钥（ak）。添完以后点击提交，就会获得一个百度地图密钥。
2、选择“控制台”-“创建应用”把相关设置填好。
二、网站内部署百度地图。
1、编写HTML页面的基础代码
在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。
<!DOCTYPE html> <html> <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style> </head> <body></body> </html>
2、引入百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
3、初始化地图逻辑
首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图。
var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别4、开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
三、百度地图GPS导航调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>多个标注点沿折线的轨迹运动</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var bounds = null;
var linesPoints = null;
var spoi1 = new BMap.Point(116.380967,39.913285); // 起点1
var spoi2 = new BMap.Point(116.380967,39.953285); // 起点2
var epoi = new BMap.Point(116.424374,39.914668); // 终点
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), {imageOffset: new BMap.Size(0, 0)});
function initLine(){
bounds = new Array();
linesPoints = new Array();
map.clearOverlays(); // 清空覆盖物
var driving3 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调
driving3.search(spoi1, epoi); // 搜索一条线路
var driving4 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调
driving4.search(spoi2, epoi); // 搜索一条线路
}
function run(){
for(var m = 0;m < linesPoints.length; m++){
var pts = linesPoints[m];
var len = pts.length;
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
map.addOverlay(carMk);
resetMkPoint(1,len,pts,carMk)
}
function resetMkPoint(i,len,pts,carMk){
carMk.setPosition(pts[i]);
if(i < len){
setTimeout(function(){
i++;
resetMkPoint(i,len,pts,carMk);
},100);
}
}
}
function drawLine(results){
var opacity = 0.45;
var planObj = results.getPlan(0);
var b = new Array();
var addMarkerFun = function(point,imgType,index,title){
var url;
var width;
var height
var myIcon;
// imgType:1的场合，为起点和终点的图；2的场合为车的图形
if(imgType == 1){
url = "http://lbsyun.baidu.com/jsdemo/img/dest_markers.png";
width = 42;
height = 34;
myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - index * height)});
}else{
url = "http://lbsyun.baidu.com/jsdemo/img/trans_icons.png";
width = 22;
height = 25;
var d = 25;
var cha = 0;
var jia = 0
if(index == 2){
d = 21;
cha = 5;
jia = 1;
}
myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(10, (11 + jia)),imageOffset: new BMap.Size(0, 0 - index * height - cha)});
}
var marker = new BMap.Marker(point, {icon: myIcon});
if(title != null && title != ""){
marker.setTitle(title);
}
// 起点和终点放在最上面
if(imgType == 1){
marker.setTop(true);
}
map.addOverlay(marker);
}
var addPoints = function(points){
for(var i = 0; i < points.length; i++){
bounds.push(points[i]);
b.push(points[i]);
}
}
// 绘制驾车步行线路
for (var i = 0; i < planObj.getNumRoutes(); i ++){
var route = planObj.getRoute(i);
if (route.getDistance(false) <= 0){continue;}
addPoints(route.getPath());
// 驾车线路
if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){
map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true}));
}else{
// 步行线路有可能为0
map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true}));
}
}
map.setViewport(bounds);
// 终点
addMarkerFun(results.getEnd().point,1,1);
// 开始点
addMarkerFun(results.getStart().point,1,0);
linesPoints[linesPoints.length] = b;
}
initLine();
setTimeout(function(){
run();
},1500);
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
