先去百度开放平台申请ak。http://lbsyun.baidu.com/

进来之后

按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥

填写完毕后提交,会给你邮箱发个激活邮件

点击申请密钥

然后点击提交

这个时候,你就可以拿着这个ak去使用百度地图了。

使用

执行

npm install vue-baidu-map

  

然后再main.js里加上(注意你自己的ak密钥)

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
ak: 'GpRqD2Sowifs********RRRRVl9'
});

  

然后就可以在组件里使用了,最简单的一个例子

<template>
<div>
<baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
<!--缩放-->
<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
<!--定位-->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<!--点-->
<bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
<!--提示信息-->
<bm-info-window :show="map.show">Hello~</bm-info-window>
</bm-marker>
</baidu-map>
</div>
</template> <script>
export default {
name: "demo",
data: () => ({
map:{
center: {lng: 121.4472540000, lat: 31.3236200000},
zoom: 15,
show: true,
dragging: true
},
}),
methods: {
handler ({BMap, map}) {
let me = this;
console.log(BMap, map)
// 鼠标缩放
map.enableScrollWheelZoom(true);
// 点击事件获取经纬度
map.addEventListener('click', function (e) {
console.log(e.point.lng, e.point.lat)
})
}
}
}
</script> <style scoped>
.map {
width: 100%;
height: 400px;
}
</style>

  

然后其它页面引入这个组件即可,注:这只是个helloworld哦

实际上运用的话,是需要将数据传递给父组件的,比如经纬度之类的。比如:

<template>
<div>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item v-if="map.isAdd" label="关键词">
<a-input v-model="map.keyword"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item v-if="map.isAdd" label="地区">
<a-input v-model="map.location"/>
</a-form-item>
</a-col>
</a-row> <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-local-search v-if="map.isAdd" class="search" :keyword="map.keyword" :auto-viewport="true" :location="map.location"></bm-local-search>
</baidu-map>
</div>
</template> <script>
export default {
name: "simple-map",
props: {
map: {
type: Object
}
},
data: () => ({ }),
methods: {
handler ({BMap, map}) {
let me = this;
console.log(BMap, map)
// 鼠标缩放
map.enableScrollWheelZoom(true);
// 点击事件获取经纬度
map.addEventListener('click', function (e) {
console.log(e.point.lng, e.point.lat)
me.$emit('select-location', {
lng: e.point.lng,
lat: e.point.lat
});
})
}
}
}
</script> <style scoped>
.map {
width: 100%;
height: 400px;
}
.map .search{
margin-bottom: 65px;
}
</style>

  

父组件

<simple-map :map="mapForAdd" @select-location="selectLocation"></simple-map>

selectLocation: function (e) {
// 这里用到了antDesign,不再科普了。实际上就是获取子组件传来的数据
this.formForAdd.setFieldsValue({
longitude: e.lng,
latitude: e.lat,
})
}

  

页面(效果就是点击地图上的点,传递经纬度)

Vue项目引入百度地图的更多相关文章

  1. vue项目接入百度地图

    方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址:https://dafrok.github.io/vue-bai ...

  2. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  3. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  4. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  5. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  6. vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等

    效果如下: var blist = [] ,maxZoom: });// 创建地图实例 var point = new window.BMap.Point(89.48,31.57); map.cent ...

  7. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  8. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  9. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

随机推荐

  1. HttpClient学习研究---第二章:连接管理

    第二章.Connection management连接管理2.1. 2.1.Connection persistence连接持久性The process of establishing a conne ...

  2. 22-1 web传输视频 Opencv+usb摄像头 树莓派+Flask实现视频流媒体WEB服务器

    第一篇 讲解原理 https://blog.miguelgrinberg.com/post/video-streaming-with-flask 第二篇 加入多线程可以直接用 https://gith ...

  3. java 调度框架quartz

    核心代码如下: public class SchedulerTest { public static void main(String[] args) { //创建schedulerFactory类 ...

  4. Numpy | 06 从已有的数组创建数组

    numpy.asarray numpy.asarray 类似 numpy.array,但 numpy.asarray 参数只有三个,比 numpy.array 少两个. numpy.asarray(a ...

  5. NSGA-II算法学习

    什么是支配: 支配就是统治,在各方面都优于其余个体 如个体i支配个体j,就说明个体i在所有目标函数的表现上都不差于个体j,并且至少在一个目标上优于个体j: 什么是非支配: 非支配就是个体在种群中是最优 ...

  6. HustOJ二次开发之隐藏菜单栏

    通过关键搜索: find / -name *nav.php 出现如下结果:/home/judge/src/web/template/ie/nav.php/home/judge/src/web/temp ...

  7. C#控制台程序入口函数 Main(string[] args) 参数详解

    学习C#编程最常见的示例程序是在控制台应用程序中输出Hello World! using System; namespace DemoMainArgs { class Program { static ...

  8. cloneable以及深拷贝和浅拷贝

    Objec类有11个方法,有两个protected的方法,其中一个为clone方法(另一个为finalize). 该方法的签名是: protected native Object clone() th ...

  9. activeMQ 的启动 停止 查看状态

    1 启动 : 进入到activeMQ 的 bin 目录,执行   ./activemq start  开启 ,如下: 2  查看activeMQ 是不是启动的状态, ./activemq  statu ...

  10. linux下检查网络连通情况

    MTR是一种简单的跨平台命令行网络诊断工具,它将常用的traceroute和ping程序的功能组合到一个工具中. 与traceroute类似, mtr输出关于数据包从运行mtr的主机到用户指定的目标主 ...