vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息_vue-bmap-gl

1. 解决提示：解决调用百度地图API弹出提示 “百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥”的方法

百度官网生成ak: https://lbsyun.baidu.com/
登录点击-控制台-应用管理-我的应用，查看AK,可以修改设置里面的启用服务，看个人需求

2. 拾取坐标：https://api.map.baidu.com/lbsapi/getpoint/index.html，老地址下滑找到坐标拾取器，进入搜索位置名称就可以获取你想要位置的坐标

一方法，vue引入百度地图BMapGL

• 1.在src目录下新建一个js文件bmpgl.js，文件名字和位置都可以随便取，随便放

export function BMPGL(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(BMapGL)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

• 2.vue页面里面引入
  

import { BMPGL } from "@/bmpgl.js"
1

<template>
  <div class="home">
  <!--创建地图容器-->
    <div id="containerMap" class="allmap"></div>
  </div>
</template>

<script>
import { BMPGL } from "@/bmpgl.js"
export default {
  name: "home",
  data() {
    return {
      ak: "XXXXXXXXX", // 百度的地图密钥AK
      myMap: null
    };
  },
  mounted() {
    this.initMap()
  },
  methods: {
    /**传入密钥获取地图回调
     * 创建地图实例,点坐标
     * axios => res 获取的初始化定位坐标
     * 初始化地图，设置中心点坐标和地图级别
     * 开启鼠标滚轮缩放
     */
     initMap() {
     	BMPGL(this.ak).then((BMapGL) => {
     		let map = new BMapGL.Map("containerMap");
            let point = new BMapGL.Point(112.89131, 28.234149)
            map.centerAndZoom(point, 19)
            map.enableScrollWheelZoom(true)
            map.setHeading(64.5)
            map.setTilt(73)
        })
        .catch((err) => {
          console.log(err)
        })
     },
  }
};
</script>
<style lang="scss" scoped>
.allmap{
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 1;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

二方法，获取天地图根据名称显示坐标定位信息

• 1.安装相关依赖

 npm i --save vue-baidu-map
1

• 2.在main.js中引用，

import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap,{
  ak: '你的密钥'
})
1
2
3
4

• 3.创建文件 bmpgl.js，名字随便取，位置随便放

export function BMPGL() {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(BMap)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = "http://api.map.baidu.com/api?v=2.0&ak="+"你的密钥"+"&callback=init";
    script.onerror = reject
    document.head.appendChild(script)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

• 4.创建容器， 指定的宽和高
• 5.引入js文件，定义需要用到的数据，定义全局的map地图对象和geocoder地理编码对象
• 6.在mounted中绘制地图
• 7.在methods中创建一个定位地点的方法，添加要展示的地点的名称，此处也可动态指定

<template>
    <div>
        <div class="map">
            <div id="containerMap" style="height: 300px; width: 100%" ref="allmap"></div>
        </div>

    </div>
</template>

<script>
import { BMPGL } from "@/bmpgl.js"

var map;
let geoc = null;
export default {
    name: "home",
    data() {
        return {
            ak: "你的密钥", // 百度的地图密钥
            dialogMap: false,
            mapPointName: "",
            mapGetshow: true
        };
    },

    created() { },
    mounted() {
        this.$nextTick(function () {
            var _this = this;
            BMPGL(_this.ak).then((BMap) => {
                let that = this;
                this.dialogMap = !this.dialogMap;
                if (that.mapGetshow) {
                    map = new BMap.Map("containerMap");    //存放地图容器的id
                    geoc = new BMap.Geocoder();
                    map.enableScrollWheelZoom();
                }
                _this.mapNameChange()    //调用定位地点的方法
            });
        });
    },

    methods: {
        mapNameChange() {
            let that = this,
                point,
                marker = null;
            let local = new BMap.LocalSearch(map, {
                renderOptions: { map: map },
                onSearchComplete: (res) => {
                    if (local.getResults() != undefined) {
                        map.clearOverlays(); //清除地图上所有覆盖物
                        if (local.getResults().getPoi(0)) {
                            point = local.getResults().getPoi(0).point; 					          //获取第一个智能搜索的结果
                            map.centerAndZoom(point, 10);
                            marker = new BMap.Marker(point); // 创建标注
                            map.addOverlay(marker); // 将标注添加到地图中
                            marker.enableDragging(); // 可拖拽
                            geoc.getLocation(point, function (rs) {
                                var addComp = rs.addressComponents;
                                that.mapPointName =
                                    addComp.province +
                                    ", " +
                                    addComp.city +
                                    ", " +
                                    addComp.district +
                                    ", " +
                                    addComp.street +
                                    ", " +
                                    addComp.streetNumber;
                            });
                        } else {
                            console.log("未搜索到结果")
                        }
                    } else {
                        alert("未搜索到结果");
                    }
                },
            });
            local.search("中电二期"); //要展示的地点
        },
    },
}
</script>

<style lang='less' scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752