vue自动定位，百度地图

1.在index.html 引入 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

2.获取百度地图密钥，参考 

https://jingyan.baidu.com/article/4b52d702902cb5fc5c774b38.html

3.在build/webpack.base.conf.js 中添加代码

externals: {

"BMap": "BMap"

},

 

---

4.代码，

百度地图的定位我一开始用pc测，定位到的地址和我当前的地址相差很大，一开始百度查看说百度地图使用的是火星坐标需要转义换算什么的算了很久，可是转换出来的经纬度还是不对，在这里卡了很久，后来查阅资料才发现因为pc端是通过IP定位的，所以存在偏差很大，用手机定位就准确了，把我遇到的问题跟大家分享一下，自己也当做个笔记，要是说的有问题欢饮指正

1. <template>
2. <div id="allmap"></div>
3. <button>点击按钮开始定位</button>
4. </template>

5. </script>

6. //import BMap from 'BMap'  //根据我的实践这句代码好像并没有什么用，主要起作用的还是引入的js

7. export default {
8.      data(){
9.              return{
10.                       
11.                    center: {lng: 116.40387397, lat: 39.91488908},
12.                     zoom: 15
13.              }
14.          },
15.         methods: {
16.               //点击按钮
17.              locationbtn（）{
18.                let map = new BMap.Map('allmap');
19.                 let point = new BMap.Point(this.center.lng, this.center.lat);
20.                 map.centerAndZoom(point, 15)
21.                 var geolocation = new BMap.Geolocation();
22.                 geolocation.getCurrentPosition((r) => {
23.                 if (r.point) {
24.                     this.center.lng = r.longitude;
25.                     this.center.lat = r.latitude;
26.  
27.                     alert('您当前经纬度：'+this.center.lng+','+ this.center.lat);
28.                      var point = new BMap.Point( this.center.lng, this.center.lat);//用当前定位的经纬度查找省市区街道等信息
29.  
30.                      var gc = new BMap.Geocoder();
31.                      gc.getLocation(point, function(rs){
32.                      var addComp = rs.addressComponents; console.log(rs.address);//地址信息
33.                      console.log(rs.address);//弹出当前所在地址
34.                      });
35.                     let markers = new BMap.Marker(r.point);
36.                     map.addOverlay(markers);
37.                     map.panTo(r.point);
38.                     map.centerAndZoom(r.point, 16);
39.                 }
40.                 })
41.             }
42.         }
43. }

44. </script>