1需要在百度开发平台注册一个账号
2进入控制台-应用管理-我的应用,创建应用得到一个访问ak(秘钥)
3进入开发文档-开发指南-hello world部署一个百度地图
<!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=(改成自已的秘钥)"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#394a64"><!DOCTYPE html></span></span></span></span></span></span>
您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><meta</span> <span style="color:#3b5bb5">name</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"viewport"</span> <span style="color:#3b5bb5">content</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"initial-scale=1.0, user-scalable=no"</span> <span style="color:#4c4e6a">/></span> </span></span></span></span></span>
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><style</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/css"</span><span style="color:#4c4e6a">></span><span style="color:#000000">
html</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%}</span><span style="color:#000000">
body</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%;</span><span style="color:#000000">margin</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">;</span><span style="color:#000000">padding</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">}</span>
<span style="color:#9e868f">#container{height:100%} </span>
<span style="color:#4c4e6a"></style></span> </span></span></span></span></span>
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><script</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/javascript"</span> <span style="color:#3b5bb5">src</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"</span><span style="color:#4c4e6a">></span></span></span></span></span></span>
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><div</span> <span style="color:#3b5bb5">id</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"container"</span><span style="color:#4c4e6a">></div></span> </span></span></span></span></span>
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> map </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Map</span><span style="color:#000000">(</span><span style="color:#3f9b1d">"container"</span><span style="color:#000000">);</span></span></span></span></span></span>
注意:
1、在调用此构造函数时应确保容器元素已经添加到地图上;
2、命名空间 API GL版使用BMapGL作为命名空间,所有类均在该命名空间之下,比如:BMapGL.Map、BMapGL.Control、BMapGL.Overlay;
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> point </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Point</span><span style="color:#000000">(</span><span style="color:#3b5bb5">116.404</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">39.915</span><span style="color:#000000">);</span></span></span></span></span></span>
注意:
在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法。
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#000000">map</span><span style="color:#000000">.</span><span style="color:#000000">centerAndZoom</span><span style="color:#000000">(</span><span style="color:#000000">point</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">15</span><span style="color:#000000">);</span> </span></span></span></span></span>
添加控件
更新时间:2020年12月21日
简介
控件是负责与地图交互的UI元素,百度地图API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
详情可见类参考。
控件 | 类名 | 简介 |
抽象基类 | Control | 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件 |
比例尺 | ScaleControl | 默认位于地图左下方,显示地图的比例关系 |
缩放 | ZoomControl | 默认位于地图右下方,控制地图级别的缩放 |
定位 | LocationControl | 默认位于地图左下方,用于获取定位 |
城市选择列表 | CityListControl | 默认位于地图左上方,用于进行城市选择定位 |
版权 | CopyrightControl | 默认位于地图左下方,用于展示版权信息 |
向地图添加控件
使用Map.addControl()方法向地图添加控件。
1参考展示地图教程完成地图初始化
<!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body></body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL // 按住鼠标右键,修改倾斜角和角度 var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
2声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 map.addControl(zoomCtrl); var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 map.addControl(cityCtrl);
控制控件位置
初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。
anchor值 | 位置说明 |
BMAP_ANCHOR_TOP_LEFT | 表示控件定位于地图的左上角 |
BMAP_ANCHOR_TOP_RIGHT | 表示控件定位于地图的右上角 |
BMAP_ANCHOR_BOTTOM_LEFT | 表示控件定位于地图的左下角 |
BMAP_ANCHOR_BOTTOM_RIGHT | 表示控件定位于地图的右下角 |
控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。
如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。
var opts = { offset: new BMapGL.Size(150, 5) } // 添加控件 map.addControl(new BMapGL.ScaleControl(opts)); // 移除控件 map.removeControl(new BMapGL.ScaleControl(opts));
添加标注点
Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions(可选)。
注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性修改标定位置。
1参考展示地图创建基本地图
2向地图中添加标注
如下示例,向地图中心点添加了一个标注,并使用默认的标注样式:
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
3向地图中添加标注
定义标注图标 通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置,您也可以使用marker.setIcon()方法。
var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), { // 指定定位位置。 // 当标注显示在地图上时,其所指向的地理位置距离图标左上 // 角各偏移10像素和25像素。您可以看到在本例中该位置即是 // 图标中央下端的尖角位置。 anchor: new BMapGL.Size(10, 25), // 设置图片偏移。 // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您 // 需要指定大图的偏移位置,此做法与css sprites技术类似。 imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移 }); // 创建标注对象并添加到地图 var marker = new BMapGL.Marker(point, {icon: myIcon}); map.addOverlay(marker);
4监听标注事件
JSAPI支持监听覆盖物的事件。
marker.addEventListener("click", function(){ alert("您点击了标注"); });
添加折线
Polyline表示地图上的折线覆盖物,它包含一组点,并将这些点连接起来形成折线。Polyline使用详情请见类参考
1添加折线
首先参考展示地图创建基本地图,之后添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
var polyline = new BMapGL.Polyline([ new BMapGL.Point(116.399, 39.910), new BMapGL.Point(116.405, 39.920), new BMapGL.Point(116.425, 39.900) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polyline);
添加多边形
Polygon表示地图上的多边形覆盖物,它包含一组点。多边形将这组点按顺序首尾相连,最终围成一个封闭图形。
1添加多边形
首先参考展示地图创建基本地图,之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
var polygon = new BMapGL.Polygon([ new BMapGL.Point(116.387112,39.920977), new BMapGL.Point(116.385243,39.913063), new BMapGL.Point(116.394226,39.917988), new BMapGL.Point(116.401772,39.921364), new BMapGL.Point(116.41248,39.927893) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polygon);
部署地图搜索实例
在vue中部署百度地图
1.在public中的index.html中引用百度地图API文件
2.在aboutview.vue文件中使用