vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)

简介: vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)

1. 在 public/index.html 中引入百度地图

  <!--引入百度地图-->
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script>

2. 在 vue.config.js 中配置 BMap

module.exports = {
    configureWebpack: {
        externals: {
            "BMap": "BMap",
        },
    },
}

3. 在 .vue 文件中引入 BMap

import BMap from 'BMap'

4. 在 .vue 文件中绘制地图

<div id="myMap" style="height: 400px"></div>
mounted(){
    var map = new BMap.Map("myMap");  // 创建Map实例
    map.centerAndZoom("上海",15);      // 初始化地图,用城市名设置地图中心点
},
目录
相关文章
|
3月前
|
资源调度 JavaScript 定位技术
Vue2使用百度地图展示或搜索地点(vue-baidu-map)
本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件,包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件,并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记,以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用,请确保已获取百度地图 API 的密钥。
512 1
|
3月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
70 0
|
3月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
55 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
164 0
|
5月前
|
Dart
Dart之集合详解(List、Set、Map)
Dart之集合详解(List、Set、Map)
|
2月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
2月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
1月前
|
存储 分布式计算 Java
Stream很好,Map很酷,但答应我别用toMap():Java开发中的高效集合操作
在Java的世界里,Stream API和Map集合无疑是两大强大的工具,它们极大地简化了数据处理和集合操作的复杂度。然而,在享受这些便利的同时,我们也应当警惕一些潜在的陷阱,尤其是当Stream与Map结合使用时。本文将深入探讨Stream与Map的优雅用法,并特别指出在使用toMap()方法时需要注意的问题,旨在帮助大家在工作中更高效、更安全地使用这些技术。
40 0
|
3月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
3月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。