在Vue框架中使用百度地图
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框架中使用百度地图的更多相关文章
- vue项目中使用百度地图的方法
1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http: ...
- vue 项目中引用百度地图
新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
随机推荐
- Java中List集合去除重复数据的四种方法
1. 循环list中的所有元素然后删除重复 public static List removeDuplicate(List list) { for ( int i = 0 ; i < lis ...
- 基于vue-cli,sass,vant的移动端项目
项目架构 开始 vue init webpack 项目名称 //新建项目,cd进入新项目 npm install axios //先安装! ...
- javap -v没有显示LocalVaribleTable
时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...
- python学习笔记(11)--词云
中分词库 jieba 词云 wordcloud import jieba import wordcloud f = open("新时代中国特色社会主义.txt", "r ...
- python学习笔记(11)--文件与数据格式化
文件的概念: 文件是数据的抽象和集合,是存储在辅助存储器上的数据序列,文件是数据存储的一种形式,文件的展现形态,文本文件和二进制文件. 文本文件输出: f.txt文件保存:“我是中国人” >&g ...
- lombok 使用 Idea
Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的.import lombok.Getter;i ...
- Vue之双向数据绑定
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- Multiple websites on single instance of IIS
序幕 通常需要在单个IIS实例上托管多个网站,主要在开发环境中,而不是在生产服务器上.我相信它在生产服务器上不是一个首选解决方案,但这至少是一个可能的实现. Web服务器单实例上的多个网站的好处是: ...
- hdu-1814(2-sat)
题意:给你n个组,m条规则,每组有俩个人,这两个人不能同时出现,然后m条规则代表着有两个人,这两个人也不能同时出现,问你是否存在每组都能出现一人的选择方案 解题思路:因为这个需要字典序输出,所以只能用 ...
- AMS工作原理—— App启动概要
说明: 1. 通过Launcher或者startActivity启动最终的流程都是和上面的一致的. 2. AMP是AMS在App端(client端)的代理, ATP是ApplicationThread ...