vue -web引入百度地图

湘水狱

已于 2023-01-13 11:10:41 修改

阅读量1.4w

点赞数 17

分类专栏： vue 文章标签： vue引入百度地图去掉百度地图LOGO 加“标识” 加“控件” 加“超链接”跳转

于 2021-08-09 13:35:32 首次发布

本文链接：https://blog.csdn.net/weixin_45527702/article/details/119533892

版权

vue 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

本篇文章是笔者记录：从零到实现的全部过程

先看效果图，是否是你想要的效果，两张不同缩放得到的效果图，目录有最终的效果图

要想实现如图所示，必须满足以下几个条件：

是否已有百度地图的api的ak密钥；
组件是否准备好；

第四步：在main.js文件中导入，并全局定义

20220425 回答如何解决BMap问题

#### 全部代码

如何获取百度地图的api的ak密钥

第一步：要有百度账号

笔者这里是用QQ号作为百度账号登录的

第二步：在“百度开放平台”创建ak

百度开放平台点击进入教程如下：

第一步：跳转该页面

红色框：代表“创建应用”成功后，ak显示的地方，在这里可以看到并复制

蓝色框：代表我们创建的应用是“浏览器端”，一般选择“浏览器端”就可以了

第二步：创建应用

点击“创建应用”，这里主要讲“浏览器端”，

点击“提交”，会自动跳转该页面

这里只需要复制 ak 就好！！！记住这个地方，后面会用到ak

第三步：下载 vue-baidu-map

命令:  npm install vue-baidu-map --save

第四步：在main.js文件中导入，并全局定义

import BaiduMap from 'vue-baidu-map'

Vue.use( BaiduMap, { ak : '上面生成的ak' } )

第五步：组件中使用

<tempate>
    <div class='dv'>
        <baidu-map class='bm-view' @ready='init'></baidu-map>
    </div>
</template>
export default {
    name:'',
    data(){
        return {  }
    },
    methods:{
        init({BMap, map}){
            this.map = map
            var point = new BMap.Point(108.910752, 34.237372)  //设置城市经纬度坐标
            map.centerAndZoom(point, 15)    //
            map.setCurrentCity('西安')   // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true)    //鼠标滚动缩放
            
            #for(var i in mapdata) {
            #    var pt = new BMap.Point(mapdata[i].longitude, mapdata[i].latitude )   //经纬度
            #    var myicon = new BMap.Icon('图片路径', new BMap.Size(32, 32))   //设置对应图片和图片大小
            #    var marker2 = new BMap.Marker(pt, { icon: myicon })  //创建标注
            #    map.addOverLay(marker2)
            #}
        }
    },
    mounted(){
        this.init()
    }

}
<style>
    .dv { width: 500px; height: 500px; }
</style>

到这里基本结束了，亲测有效！！

第六步：总结

这个只是简单的将其显示出来，地图样式，笔者还在调试，等待调试成功，会继续完善本篇文章。

任务需求需要加入地图，笔者一点一点查资料自己摸索，终于有了一大步的进步，为了记录和方便同行初学者走弯路，专写这篇文章，希望对你们有用，谢谢。

该片文章记录从如何生成ak到如何应用，再到如何实现。

第七步：完善地图样式

在组件中引入json样式文件 import custom_map_config from '样式文件路径'，自定义百度地图样式下载即可，

在第五步的代码中加入 map.setMapStyle( { styleJson: custom_map_config } )，这样就可以改变地图样式，注意：新版本个性样式地图使用：map.setMapStyleV2

去掉百度地图LOGO

20210810，留言：如果想去掉百度地图的LOGO，可以看看这篇文章只需要两行代码就可以实现如何去掉百度地图LOGO

地图加标识，标识上加超链接跳转

第一步：找到地图组件

第二步：找到加载地图的函数

第三步：在函数中继续写入，如一下代码：

var data_info = [
                [110.229321,25.227083,"地址：广西省桂林市七星区岭脚底<h4><a target='_blank' href='https://www.baidu.com/' style='color:blue;'>*****</a></h4>"],
                [104.979273,25.096498,"地址：贵州省黔西南布依族自治州水牛湾 <h4><a target='_self' href='https://www.baidu.com/' style='color:blue;'>****</a></h4>"],
                [112.60061,37.74101,"地址：山西省太原市小店区经济开发区 <h4><a target='_blank' href='https://www.baidu.com/' style='color:blue;'>****</a></h4>"],
                [109.944203,40.764037,"地址：内蒙古省包头市石拐区二道坝沟 <h4><a target='_blank' href='https://www.baidu.com/' style='color:blue;'>***</a></h4>"],
                [126.448706,45.959158,"地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_self' href='https://www.baidu.com/' style='color:blue;'>****</a></h4>"],
            ];
            var opts = {
                min_width : 250,     // 信息窗口zuixiao宽度
                min_height: 80,     // 信息窗口高度
                title : "详细信息" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
            for(var i=0;i<data_info.length;i++){
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }
            function openInfo(content,e){
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }

data_info中html代码就是实现超链接

添加控件

//向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({anchor:CUSTOM_MAP_CONFIG,type:CUSTOM_MAP_CONFIG});
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor:CUSTOM_MAP_CONFIG,isOpen:1});
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor:CUSTOM_MAP_CONFIG});
            map.addControl(ctrl_sca);

效果图

20220425 回答如何解决BMap问题

今日来解决下大家遇到的问题

报错：[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'BMap')"

这里小编自己重启一个项目看看是否会发生和大家一样问题，并找出根源。笔者这里自己重新创建一个项目运行，无问题。

现将所有代码放出来，

全部代码

main.js

在main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import BaiduMap from 'vue-baidu-map'

Vue.config.productionTip = false
Vue.use(BaiduMap, {
  ak: '你申请的key'
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

test.vue

<template>
    <div id="test">
        <baidu-map class="bm-view" @ready="init"></baidu-map>
    </div>
</template>

<script>
// const CUSTOM_MAP_CONFIG = require("../../assets/json/custom_map_config.json");
// const CUSTOM_MAP_CONFIG = require("../../assets/json/custom_map_config01.json");
// const CUSTOM_MAP_CONFIG = require("../../assets/json/custom_map_config02.json");
const CUSTOM_MAP_CONFIG = require("../../assets/json/custom_map_config03.json");
export default {
    name: 'Home',
    components: {

    },
    data(){
        return {
            
        }

    },
    methods:{
        init({BMap, map}){
            this.map = map
            var point = new BMap.Point(108.953723, 34.276202)  //设置城市经纬度坐标
            // var cityCtrl = new BMap.CityListControl()    //城市下来框选择定位
            // map.addControl(cityCtrl)
            // var locationCtrl = new BMap.LocationControl()
            map.centerAndZoom(point, 5)    //
            map.setCurrentCity('西安')   // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true)    //鼠标滚动缩放
            // map.setHeading(60) //设置地图旋转角度
            // map.setTilt(73)   //设置地图倾斜角度
            map.setMapStyle({styleJson: CUSTOM_MAP_CONFIG})    //导入主题样式

            var data_info = [
                [110.229321,25.227083,"地址：广西省桂林市七星区<h4><a target='_blank' href='http://000.00.00.000:49151' style='color:blue;'>AAAA</a></h4>"],
                [104.979273,25.096498,"地址：贵州省黔西南布依族自治州<h4><a target='_self' href='http://000.00.00.000:49152' style='color:blue;'>BBB</a></h4>"],
                [112.60061,37.74101,"地址：山西省太原市小店区经济开发区 <h4><a target='_blank' href='http://000.00.00.000:49153' style='color:blue;'>CCC</a></h4>"],
                [109.944203,40.764037,"地址：内蒙古省包头市石拐区<h4><a target='_blank' href='http://000.00.00.000:49154' style='color:blue;'>DDDD</a></h4>"],
                [126.448706,45.959158,"地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_self' href='http://000.00.00.000:49100' style='color:blue;'>EEEE</a></h4>"],
                [96.448706,30.959158,"地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_blank' href='http://000.00.00.000:49156' style='color:blue;'>FFF</a></h4>"],
            ];
            var opts = {
                min_width : 250,     // 信息窗口zuixiao宽度
                min_height: 80,     // 信息窗口高度
                title : "详细信息" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
            for(var i=0;i<data_info.length;i++){
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }
            function openInfo(content,e){
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }
            
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({anchor:CUSTOM_MAP_CONFIG,type:CUSTOM_MAP_CONFIG});
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor:CUSTOM_MAP_CONFIG,isOpen:1});
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor:CUSTOM_MAP_CONFIG});
            map.addControl(ctrl_sca);

            // map.addEventListener('click',function(e){
            //     console.log(e);
                // alert('经度：' + e.point.lng + '\n纬度：' + e.point.lat)
                // window.location.href = 'http://114.116.211.121:49151'
        },
        
    },
    mounted(){
        this.init()
    }
}
</script>
<style>
    #test { height: 98vh; width: 100%; background-color: rgb(192, 228, 127); }
    .bm-view { width: 100%; height: 100%; }
</style>

湘水狱

关注

17
点赞
踩
77

收藏

觉得还不错? 一键收藏
38
评论
vue -web引入百度地图

先看效果图，是否是你想要的效果，两张不同缩放得到的效果图要想实现如图所示，必须满足以下几个条件：是否已有百度地图的api的ak密钥；组件是否准备好；如何获取百度地图的api的ak密钥第一步：要有百度账号笔者这里是用QQ号作为百度账号登录的第二步：在“百度开放平台”创建ak百度开放平台点击进入教程如下：第一步：跳转该页面红色框：代表“创建应用”成功后，ak显示的地方，在这里可以看到并复制蓝色框：代表我们创建的应用是“浏览器端”，一般选择“浏...
复制链接

扫一扫