1、首先在index.html中引入百度地图

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

2、在组建中设置一个容器

<template>
<div class="box">
<div id="boxMap"></div>
</div>
</template>

3、设置容器样式

.box{
width: 100%;
min-height: 800px;
}
#boxMap {
width: 100%;
min-height: 800px;
}

4、创建地图实例

export default {
data() {
return {}
},
methods: {
_getMapData() {
let map = new BMap.Map("firePowerMap"); // 创建Map实例
let point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
map.setCurrentCity("北京"); // 地图显示的城市
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
window.map = map;//将map变量储存在全局
//****将map变量存储在全局,只有将地图储存在全局,别的方法才能取到
}
}

必须要给容器设置高度!

必须把地图变量储存在全局!

在Vue框架中使用百度地图的更多相关文章

  1. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  2. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  3. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

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

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

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

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

  6. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  7. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  8. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  9. 在ionic/cordova中使用百度地图插件

    在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...

随机推荐

  1. Java中List集合去除重复数据的四种方法

    1. 循环list中的所有元素然后删除重复   public static List removeDuplicate(List list) { for ( int i = 0 ; i < lis ...

  2. 基于vue-cli,sass,vant的移动端项目

    项目架构 开始 vue init webpack    项目名称         //新建项目,cd进入新项目 npm install axios                    //先安装! ...

  3. javap -v没有显示LocalVaribleTable

    时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...

  4. python学习笔记(11)--词云

    中分词库  jieba 词云 wordcloud import jieba import wordcloud f = open("新时代中国特色社会主义.txt", "r ...

  5. python学习笔记(11)--文件与数据格式化

    文件的概念: 文件是数据的抽象和集合,是存储在辅助存储器上的数据序列,文件是数据存储的一种形式,文件的展现形态,文本文件和二进制文件. 文本文件输出: f.txt文件保存:“我是中国人” >&g ...

  6. lombok 使用 Idea

    Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的.import lombok.Getter;i ...

  7. Vue之双向数据绑定

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. Multiple websites on single instance of IIS

    序幕 通常需要在单个IIS实例上托管多个网站,主要在开发环境中,而不是在生产服务器上.我相信它在生产服务器上不是一个首选解决方案,但这至少是一个可能的实现. Web服务器单实例上的多个网站的好处是: ...

  9. hdu-1814(2-sat)

    题意:给你n个组,m条规则,每组有俩个人,这两个人不能同时出现,然后m条规则代表着有两个人,这两个人也不能同时出现,问你是否存在每组都能出现一人的选择方案 解题思路:因为这个需要字典序输出,所以只能用 ...

  10. AMS工作原理—— App启动概要

    说明: 1. 通过Launcher或者startActivity启动最终的流程都是和上面的一致的. 2. AMP是AMS在App端(client端)的代理, ATP是ApplicationThread ...