百度地图API开发
获取开发密钥
创建应用
点击创建应用按钮
2、填写信息,创建应用
3、创建成功,获取到账号和ak
入门实例
<!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>Hello, World</title>
<style type="text/css">
/* 设置容器样式 */
html{
height:100%}
body{
height:100%;margin:0px;padding:0px}
#container{
height:100%}
</style>
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
<!-- v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" -->
</script>
</head>
<body>
<!-- 创建地图容器元素 -->
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例,地图的容器的id container
var map = new BMap.Map("container");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
//15表示地图的放大级别,数字越大,地图放大倍数越大
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
</script>
</body>
</html>
页面显示如下
官网入门示例
去除百度地图中百度的logo和版权
添加如下css样式在html中
/*去除百度地图的logo*/
.BMap_cpyCtrl{
display: none!important;
}
.anchorBL {
display: none!important;
}
常用的坐标系
WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。
非中国地区地图,服务坐标统一使用WGS84坐标
添加标注点
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
完整代码
<!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>Hello, World</title>
<style type="text/css">
/* 设置容器样式 */
html{
height:100%}
body{
height:100%;margin:0px;padding:0px}
#container{
height:100%}
</style>
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
<!-- v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" -->
</script>
</head>
<body>
<!-- 创建地图容器元素 -->
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图,设置中心点坐标和地图级别
var marker=new BMap.Marker(point);
map.addOverlay(marker);
//开启鼠标滚动对地图进行缩放
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
</body>
</html>
页面上显示
百度地图控件的使用
平移缩放控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图控件实例展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
var map;//地图对象
function InitMap(){
map=new BMap.Map("container");
var point =new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//地图的中心点和方法级别,15表示地图的放大级别,数字越大,放大倍数越大
map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
map.addControl(new BMap.NavigationControl());//平移缩放控件,默认是在左上角
}
</script>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 90%;
width: 100%;
}
</style>
</head>
<body onload="InitMap();">
<div id="container"></div>
</body>
</html>
页面展示如下
平移缩放控件api(官网介绍)
- 仅包含平移按钮的平移缩放控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图控件实例展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
var map;//地图对象
function InitMap(){
map=new BMap.Map("container");
var point =new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//地图的中心点和方法级别,15表示地图的放大级别,数字越大,放大倍数越大
map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
var opts={
type:BMAP_NAVIGATION_CONTROL_PAN} /*平移缩放控件类型:BMAP_NAVIGATION_CONTROL_PAN(仅包含平移按钮)*/
map.addControl(new BMap.NavigationControl(opts));//平移缩放控件,默认是在左上角
}
</script>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 90%;
width: 100%;
}
</style>
</head>
<body onload="InitMap();">
<div id="container"></div>
</body>
</html>
页面显示
比例尺控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图控件实例展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<script>
var map;//地图对象
function InitMap(){
map=new BMap.Map("container");
var point =new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//地图的中心点和方法级别,15表示地图的放大级别,数字越大,放大倍数越大
map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
var opts={
type:BMAP_NAVIGATION_CONTROL_PAN} /*平移缩放控件类型:BMAP_NAVIGATION_CONTROL_PAN(仅包含平移按钮)*/
map.addControl(new BMap.NavigationControl(opts));//平移缩放控件,默认是在左上角
//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
//offset: new BMap.Size(150, 5)控件位置的偏移值
var opts1={
anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
}
</script>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 90%;
width: 100%;
}
</style>
</head>
<body onload="InitMap();">
<div id="container"></div>
</body>
</html>
页面展示
地图类型控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图控件实例展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
var map;//地图对象
function InitMap(){
map=new BMap.Map("container");
var point =new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//地图的中心点和方法级别,15表示地图的放大级别,数字越大,放大倍数越大
map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
var opts={
type:BMAP_NAVIGATION_CONTROL_PAN,offset: new BMap.Size(100, 450)} /*平移缩放控件类型:BMAP_NAVIGATION_CONTROL_PAN(仅包含平移按钮)*/
map.addControl(new BMap.NavigationControl(opts));//平移缩放控件,默认是在左上角
//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
//offset: new BMap.Size(150, 5)控件位置的偏移值
var opts1={
anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
//添加地图类型控件
//type:控件样式,BMAP_MAPTYPE_CONTROL_DROPDOWN:下拉列表展示
var opts3={
type:BMAP_MAPTYPE_CONTROL_DROPDOWN}
map.addControl(new BMap.MapTypeControl(opts3));
}
</script>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 90%;
width: 100%;
}
</style>
</head>
<body onload="InitMap();">
<div id="container"></div>
</body>
</html>
页面样式
版权控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图控件实例展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
var map;//地图对象
function InitMap(){
map=new BMap.Map("container");
var point =new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//地图的中心点和方法级别,15表示地图的放大级别,数字越大,放大倍数越大
map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
var opts={
type:BMAP_NAVIGATION_CONTROL_PAN,offset: new BMap.Size(100, 450)} /*平移缩放控件类型:BMAP_NAVIGATION_CONTROL_PAN(仅包含平移按钮)*/
map.addControl(new BMap.NavigationControl(opts));//平移缩放控件,默认是在左上角
//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
//offset: new BMap.Size(150, 5)控件位置的偏移值
var opts1={
anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
//添加地图类型控件
//type:控件样式,BMAP_MAPTYPE_CONTROL_DROPDOWN:下拉列表展示
var opts3={
type:BMAP_MAPTYPE_CONTROL_DROPDOWN}
map.addControl(new BMap.MapTypeControl(opts3));
//添加版权控件
var cr=new BMap.CopyrightControl({
anchor:BMAP_ANCHOR_TOP_RIGHT,offset: new BMap.Size(150, 20)})//设置版权位置
map.addControl(cr);
var bs=map.getBounds();//返回地图可视区域
cr.addCopyright(
{
id:1,
content:
"<a href='http://www.baidu.com' target='_bank' style='font-size:20px;background:green;color:#fff;'>百度地图</a>",
bounds:bs});
}
</script>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 90%;
width: 100%;
}
</style>
</head>
<body onload="InitMap();">
<div id="container"></div>
</body>
</html>
页面显示
定位控件
GeolocationControl官网介绍
<!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=3.0&ak=您的密钥"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("allmap");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//添加定位控件
/* anchor:BMAP_ANCHOR_BOTTOM_LEFT,控件将定位到地图的左下角 */
/*offset: 控件的水平偏移值 */
/*showAddressBar: 显示定位信息面板 */
var opts={
anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(50,50),showAddressBar:true}
map.addControl(new BMap.GeolocationControl(opts));
</script>
</body>
</html>
页面显示
点击按钮,弹出信息提示框,点允许,定位控件显示定位地点
全景控件
PanoramaControl:负责切换至全景地图的控件
全景图要显示正常需要:1.百度地图api的版本要支持;2.该城市支持全景图
<!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=3.0&ak=16GrycqmnvR3e8XLjkVWGSWGLBSlUfvj"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("allmap");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//添加定位控件
/* anchor:BMAP_ANCHOR_BOTTOM_LEFT,控件将定位到地图的左下角 */
/*offset: 控件的水平偏移值 */
/*showAddressBar: 显示定位信息面板 */
var opts={
anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(50,50),showAddressBar:true}
map.addControl(new BMap.GeolocationControl(opts));
//添加全景控件
map.addControl(new BMap.PanoramaControl());
</script>
</body>
</html>
页面显示如下
自定义控件
地图覆盖物marker
官网关于marker的api
官网关于marker的示例
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>marker演示</title>
<style type="text/css">
body, html,#container {
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
/*去除百度地图的logo*/
.BMap_cpyCtrl{
display: none!important;
}
.anchorBL {
display: none!important;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script>
// 创建地图实例
var map = new BMap.Map("container");
// 创建点坐标
var point = new BMap.Point(104.06, 30.67);//成都的经纬度点
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point2=new BMap.Point(104.06, 30.67)
//
var markerOptions={
//允许覆盖物在map.clearOverlays方法中被清除,false为不被清除
enableMassClear:false,
//开启拖拽功能,true为开启
enableDragging:true,
// 是否响应点击事件。默认为true,true为开启点击事件
enableClicking:true
}
var marker=new BMap.Marker(point2,markerOptions); // 创建标注
//监听marker事件
marker.addEventListener('click',function(event){
console.log(event.type);
console.log(event.target);
alert('图像标注被点击了!')
});
map.addOverlay(marker); // 将标注添加到地图中
map.clearOverlays();//清除地图上的覆盖物
</script>
</body>
</html>
页面展示,点击图标,弹出弹窗
添加点覆盖物
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用百度地图API文件 -->
<script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=您的密钥"></script>
<style>
/*去除百度地图的logo*/
.BMap_cpyCtrl {
display: none !important;
}
.anchorBL {
display: none !important;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
/*设置容器样式*/
#mapShow {
height: 100%;
}
</style>
</head>
<body>
<div id="mapShow">
</div>
<script>
//创建地图实例,地图的容器的id mapShow
var map = new BMapGL.Map('mapShow')
//允许地图可被鼠标滚轮缩放,默认禁用
map.enableScrollWheelZoom(true)
map.enableScrollWheelZoom(true)
// 根据城市名设置中心点和地图级别
map.centerAndZoom('合肥市', 15)
//信息窗口样式
var opts = {
width: 90, // 信息窗口宽度
height: 150 // 信息窗口高度
}
// 百度坐标系坐标(地图中需要使用这个)
var bPoints = new Array()
//
var pointArray = [];
let a = {
longitude: 117.164,
latitude: 31.848,
name: '1号',
number: '1',
location: '1001'
}
pointArray.push(a);
mapResult(pointArray);
/*地图检索结果*/
function mapResult (points) {
map.clearOverlays()//清除所有标记点
if (points.length > 0) {
for (let i = 0; i < points.length; i++) {
// 标注点转换成地图上的点
var point = new BMapGL.Point(points[i].longitude, points[i].latitude)
bPoints.push(point) // 添加到百度坐标数组 用于自动调整缩放级别
// 创建标注
var marker = new BMapGL.Marker(point)
var content = '<p>' + [points[i].number + '</p>' + '<p>' + points[i].name] + '</p>' + '<p>' + points[i].location + '</p>'
// 将标注添加到地图中
map.addOverlay(marker)
// 添加标注点点击事件
addClickHandle(content, marker)
}
// 根据点的数组自动调整缩放级别
var view = map.getViewport(eval(bPoints))
var mapZoom = view.zoom
var centerPoint = view.center
map.centerAndZoom(centerPoint, mapZoom)
} else {
map.clearOverlays()//清除所有标记点
map.centerAndZoom('合肥市', 15)
}
}
// 标注点点击事件
function addClickHandle (content, marker) {
marker.addEventListener('click', function (e) {
openInfo(content, e)
})
}
// 打开信息窗口
function openInfo (content, e) {
var p = e.target
var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat)
var infoWindow = new BMapGL.InfoWindow(content, opts) // 创建信息窗口对象
map.openInfoWindow(infoWindow, point) //开启信息窗口
}
</script>
</body>
</html>
显示结果如下:
vue中使用百度地图
入门示例
在使用Vue做项目的时候,需要使用百度地图,使用了 vue-baidu-map插件
npm install vue-baidu-map --save
在vue脚手架搭建下
百度地图在ie浏览器中不显示
1、 安装babel-polyfill
npm install --save babel-polyfill
2、main.js文件引入:
import 'babel-polyfill'
3、在build文件夹下找到webpack.base.conf.js.
将
module.exports = {
entry: {
app: "./src/main.js"
},
替换成
module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
},