本文是一篇关于如何在Vue.js项目中集成和使用百度地图API的详细教程，包括申请百度账号和AK、创建地图实例、设置中心点、开启滚轮缩放、添加标注、折线、多边形、文本标注、信息窗口以及各种定位方法的介绍。
目录
1、申请百度账号和ak
2、准备页面
3、添加meta标签 方便在移动平台上展示
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4、引用百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
5、创建地图容器元素 设置容器样式 大小
<div id="container"></div>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
6、创建地图实例
var map = new BMapGL.Map("container");
7、设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMapGL.Point(116.404, 39.915); 注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。
8、地图初始化，同时设置地图展示级别
在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
map.centerAndZoom(point, 15);
9、开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
10、设置地图的旋转角度和倾斜角度
地图可以自定义旋转角度和倾斜角角度
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
enableRotate: false,
enableTilt: false
});
11、变更地图类型为地球
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
12、声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 map.addControl(zoomCtrl); var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 map.addControl(cityCtrl);
13、向地图中添加标注
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
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);
14、监听标注事件
marker.addEventListener("click", function(){
alert("您点击了标注");
});
15、添加折线
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);
16、添加多边形
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);
17、向地图中添加文本标注
var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
})
map.addOverlay(label); // 将标注添加到地图中
18、修改文本标注样式
var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, { // 创建文本标注
position: point,
offset: new BMapGL.Size(10, 20)
})
map.addOverlay(label); // 将标注添加到地图中
label.setStyle({ // 设置label的样式
color: '#000',
fontSize: '30px',
border: '2px solid #1E90FF'
})
19、向地图中添加信息窗口
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
20、定位
浏览器定位
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：' + r.point.lng + ',' + r.point.lat);
}
else {
alert('failed' + this.getStatus());
}
});
IP定位
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
alert("当前定位城市:" + cityName);
}
var myCity = new BMapGL.LocalCity();
myCity.get(myFun);
定位SDK辅助定位
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMapGL.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：' + r.point.lng + ',' + r.point.lat);
}
else {
alert('failed' + this.getStatus());
}
});
扫一扫
2286
到【灌水乐园】发言
