1.百度地图的注册使用密钥

点开下面连接进行注册然后
百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/?qq-pf-to=pcqq.group

点开控制台进入我的应用

点击创建应用即可获取密钥

2.创建地图实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>我的第一个地图</title>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密匙"></script>

//在这里输入你的密匙即可使用

<style type="text/css">

#container{height: 600px;width: 800px;}

/*容器地图的宽高 */

</style>

</head>

<body>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(116.404, 39.915);

// 创建点坐标

map.centerAndZoom(point, 15);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 地图控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件

map.addControl(scaleCtrl);

var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件

map.addControl(zoomCtrl);

var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件

map.addControl(cityCtrl);

</script>

</body>

</html>

这样一个简单的网页版百度地图就出来了

下面是效果图

3.百度地图的绘制点、线、面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>我的第一个地图</title>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>

<style type="text/css">

#container{height: 600px;width: 800px;}

/*容器地图的宽高 */

</style>

</head>

<body>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(113.6648, 34.7835);

// 创建点坐标

map.centerAndZoom(point, 17);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 添加点

var marker = new BMapGL.Marker(point); // 创建标注

map.addOverlay(marker);

// 将标注添加到地图中

// 记录点的数组

var lineArr = [];

// 记录上一个个

var last = null;

// 添加事件

map.addEventListener("click",e=>{

// 有上一个就移除上一个

last?map.removeOverlay(last):'';

// 获取单击点的位置(经度，纬度)

var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

// 添加到数组组件

lineArr.push(p);

// 创建一个标记

var m = new BMapGL.Marker(p);

// 重新定义上一个

last = m;

// 显示标记

map.addOverlay(m);

})

// 双击事件

map.addEventListener("dblclick",()=>{

// 移除最后点

map.removeOverlay(last)

// 多边线 strokeColor颜色 strokeWeight线粗细 strokeOpacity 线的透明度

// var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

// 显示线

// map.addOverlay(polyline);

var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"})

map.addOverlay(polygon);

// 清空数组

lineArr=[];

})

// 地图控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件

map.addControl(scaleCtrl);

var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件

map.addControl(zoomCtrl);

var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件

map.addControl(cityCtrl);

</script>

</body>

</html>

4.百度地图精确搜索

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>我的第一个地图</title>

<script

type="text/javascript"

src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"

></script>

<script src="./jquery-3.3.1.js"></script>

<style type="text/css">

#container {

height: 600px;

width: 800px;

}

/*容器地图的宽高 */

/* tip定位 */

.tip{

position: absolute;

top:35px;

z-index: 10000;

background-color:rgba(255,255,255,.7);

}

</style>

</head>

<body>

<input type="text" id="inp">

<div class="tip"></div>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(113.6648, 34.7835);

// 创建点坐标

map.centerAndZoom(point, 17);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 创建一个本地搜索

var local = new BMapGL.LocalSearch(map, {

renderOptions: { map: map },

});

// local.search("景点");

//当输入框inp 发送动作时候发送ajax请求到百度返回键

$(function(){

$("#inp").on("input",function(){

// 输出文本框的的内容

// console.log($("#inp").val())

// 发ajax请求到建议

$.ajax({

url:`https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=你的密钥`,

dataType:"jsonp",

success:function(res){

console.log(res.result);

// 把res.result遍历成dom节点

var str = "";

res.result.forEach(item=>{

str+=`<p class="item">${item.name}</p>`

})

// 放入到tip div中

$(".tip").html(str);

}

})

})

// 给tip添加单击事件执行搜索

// 用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制确定具体按个元素被单击

$(".tip").on("click",".item",function(){

// 获取当前单击item的文本并进行搜索

local.search($(this).text());

// 清空tip

$(".tip").html("");

// 清空输入框

$("#inp").val("");

})

})

</script>

</body>

</html>

5.获取当前位置的坐标

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

//使用juqery

<script src="./jquery-3.3.1.js"></script>

</head>

<body>

<p class="addres"></p>

<script>

$(function(){

$.ajax({

url:"http://api.map.baidu.com/location/ip?ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I&ip=&coor=bd09ll",

dataType:"jsonp",

success:function(res){

console.log(res);

$(".address").html(res.content.address);

}

})

})

</script>

</body>

</html>

如何网页中使用百度地图完整版相关推荐

如何在网页中加入百度地图
昨天给某企业做网站建设,对方要求在网页中加入百度地图,并表示可以增加酬劳.武汉SEO老钱出于信誉合作的考虑,这块直接给对方免单了-- 关于如何在网页中加入百度地图,其实并没有想象中那么复杂,因为,这是 ...
在网页中插入百度地图
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...
在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...
在网页中嵌入百度地图的步骤
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特 ...
在网页中插入百度地图(Wayde-实例)
摘要:进入:http://api.map.baidu.com/lbsapi/creatmap/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)... 转载请注明来源:在网页中插 ...
如何在HTMl网页中插入百度地图
方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...
百度地图如何在html中显示图片,在网页中插入百度地图(实例)
获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用.) 1.在间插入下面代码:这是样式和JS脚本. html,body{margin:0;padding:0;} .i ...
如何在网页中调用百度地图API
转载地址:http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html [百度地图API]建立全国银行位置查询系统(一)--如何创建地图 ...
在网页中插入百度地图的那些事
在公司做项目的时候,做一个联系我们的页面,需要在页面插入百度地图,由于使用bootstrap框架开发的,所以会在ie和火狐出现问题(显示不出来),bootstrap.css样式里面包含地图的属性,把d ...

如何网页中使用百度地图完整版

1.百度地图的注册使用密钥

2.创建地图实例

3.百度地图的绘制点、线、面

4.百度地图精确搜索

5.获取当前位置的坐标

如何网页中使用百度地图完整版相关推荐

最新文章

热门文章

如何网页中使用百度地图完整版

1.百度地图的注册 使用 密钥

2.创建地图实例

3.百度地图的绘制点、线、面

4.百度地图精确搜索

5.获取当前位置的坐标

如何网页中使用百度地图完整版相关推荐

最新文章

热门文章

1.百度地图的注册使用密钥