当前位置:首页 > 技术分析 > 正文内容

vue.js正确使用百度地图的方案(js调用百度地图)

ruisui882个月前 (05-04)技术分析20

方案一:
1.在index.html,加入

2.在vue.config.js,配置

configureWebpack: config => {
config.externals = { 'BMap': 'BMap' }
}


3.在Address.vue页面

import BMap from 'BMap'
export default {
methods: {
initMap () {
var map = new BMap.Map('container')
//创建地址解析器实例
var myGeo = new BMap.Geocoder()
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint('广州天河体育中心', (point) => {
if (point) {
map.centerAndZoom(point, 15)
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var opts = {
width: 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title: '办公地址:', // 信息窗口标题
message:‘广州天河体育中心’
}
var infoWindow = new BMap.InfoWindow(‘广州天河体育中心’, opts) // 创建信息窗口对象
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point) //开启信息窗口
})
marker.dispatchEvent('click')
}
})
}
},
}
},
mounted () {
this.initMap()
}

过程如果遇到百度地图的js报错,如下:
Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’
请检查输入的地址的值是否存在,而不是 的dom相关的问题。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3799.html

分享给朋友:

“vue.js正确使用百度地图的方案(js调用百度地图)” 的相关文章

vue3中父子传值、defineProps用法、defineEmits用法

Vue3中新增了一个 script setup 语法糖模式,可以在单文件组件中更简洁地编写组件逻辑。使用 script setup 语法后,props、data、computed、methods 等选项不再需要独立定义,而是可以直接在 setup 函数中声明,代码结构更加清晰,并且可以更方便地使用响...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

基于 vue3.0 小程序拖拽定制

今天给大家分享一个使用Vue3编写的自由DIY小程序页面。mbDIY 一款基于vue3.x构建的可拖拽定制小程序模板。支持新建页面、自由拖拽模块、复制/移动、自定义模块样式等功能。整个项目分为页面、模块、控件三大部分。模块里面的组件可拖拽至主面板区,编辑后保存即可预览效果。快速安装# 克隆项目 gi...

Ruoyi-vue第五十二章:Uniapp小程序配置tabbar底部导航栏

一、功能实现效果如下图底部的tabbar二、uniapp的tabBar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性...

微信正开发“应用号”取代手机应用

长江商报消息用户只需关注公众号,不必下载APP就可获得相同体验本报讯(记者 陈妮希)昨日,2016微信公开课PRO版在广州举行,腾讯公司高级执行副总裁、微信事业群总裁张小龙首次公开演讲,并透露微信正在开发“应用号”,将应用和订阅号相结合。现场,微信团队还首次发布了腾讯生物识别标准“TENCENTSO...