vue中使用百度地图api

最近研究了一下地图，这是是以百度地图为例（其他地图）用法一样，这里一步步来讲解。

前提是已经注册百度地图账号，申请开发者 详细操作，点击这里

首先要在打开百度地图API官网： 打开控制台，应用管理->我的应用。复制一个ak，注意pc应用，要选择浏览器端.

 打开vue项目在index.html中引入   密钥就是我的应用中的ak

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

创建一个map.vue文件，来一步一步配置

<template>
     <div id="map" style="width:100%;height:100vh;position: relative;"></div>
</template>

<script>
export default {
  data(){
    return{
      lng:'120.096',
      lat:'30.2904',
      keyword:'',
      localSearch:null,
      markers: [
      {lng: 120.096, lat: 30.2904},
      {lng: 120.096, lat: 30.2902},
      {lng: 120.096, lat: 30.2903},
      {lng: 120.096, lat: 30.29041},
    ]
    }
  },
  methods:{
    search(){
      this.localSearch(this.keyword)
    }
  },
mounted() {
  // 获取当前的经纬度
navigator.geolocation.getCurrentPosition(posiaion => {
      console.log(posiaion.coords);
  })
let map = new window.BMapGL.Map("map");          // 创建地图实例 
let point = new window.BMapGL.Point(this.lng,this.lat);  // 创建点坐标 
let scaleCtrl = new window.BMapGL.ScaleControl()   //添加比例尺
map.addControl(scaleCtrl);
let zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
let cityCtrl = new window.BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true);   //开启滚轮缩放
// 添加单个标注点
// let marker = new window.BMapGL.Marker(point); 
// map.addOverlay(marker);   //将单个标注点添加到地图中
// 添加多个标注点
let moreMarker=null
this.markers.map((item,index)=>{
   moreMarker=new window.BMapGL.Marker(new window.BMapGL.Point(this.markers[index].lng,this.markers[index].lat))
map.addOverlay(moreMarker);                     // 将多个标注点标注添加到地图中
})
// //添加带有高度的遮盖物
// let  marker3d = new window.BMapGL.Marker3D(point, 8000, {
//   size: 50,  //控制范围的大小
//   shape: 'BMAP_SHAPE_CIRCLE',  //遮盖物的形状
//   fillColor: '#454399',  //范围的颜色
//   fillOpacity: 0.6   //透明图
// });
// map.addOverlay(marker3d);
// 绑定事件
// map.addEventListener('click',(e)=>{
//   let geoc = new window.BMapGL.Geocoder(); //地址解析对象
//             //获取经纬度
//             //e.latlng.lng-经度
//             //e.latlng.lat-纬度
//             // 将获取到的经纬度转化为坐标
//   let pt = new window.BMapGL.Point(e.latlng.lng, e.latlng.lat);
//   geoc.getLocation(pt, (re)=>{
//     console.log(re);  //可以获取点击位置的详细信息
//   })
// })
map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别
}
}
</script>

这里有一些容易踩坑的地方

在官网中，使用的都是new BMap 在项目中使用时会报错   BMap未定义，

把new BMap改成new window.BMapGL即可

以上就是一些简单的配置，还在更新中，有问题随时私信即可，还在持续更新中（准备加上搜索功能）