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);      // 初始化地图,用城市名设置地图中心点
},
目录
相关文章
|
30天前
|
资源调度 JavaScript 定位技术
Vue2使用百度地图展示或搜索地点(vue-baidu-map)
本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件,包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件,并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记,以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用,请确保已获取百度地图 API 的密钥。
|
1月前
|
Java Serverless Go
Golang 开发函数计算问题之在 Golang 中避免 "concurrent map writes" 异常如何解决
Golang 开发函数计算问题之在 Golang 中避免 "concurrent map writes" 异常如何解决
|
1月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
32 0
|
1月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
29 0
|
2月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
101 0
|
4月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
192 10
|
4月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
117 9
|
4月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
65 8
|
4月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
81 7
|
4月前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
77 4