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

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

ruisui8813小时前技术分析1

方案一:
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调用百度地图)” 的相关文章

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用(组、权限、用户、项目)2 GitLab简介GitLab是整个DevOps生命周期...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...

首批龙芯3A6000电脑规模化应用:内置QQ、微信主流软件

6月18日消息,今日,龙芯中科宣布,近千台龙芯3A6000电脑走进福建福州某区各科室并服务于具体工作开展。据介绍,该批电脑为实现首批规模化应用的3A6000整机产品,搭载国产操作系统,内置主流办公和即时通讯等软件,可充分满足打印机利旧要求(兼容原有打印机设备)。3A6000根据官方晒出的桌面截图显示...

详解编程中的同步和异步

本文主要总结一些自己对异步的理解,话不多说 下面开始。一. 单线程 我们常说“JavaScript是单线程的”,所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程 但是实际上还存在其他的线程。例如:处理AJAX请求的线程、处理DOM事件的线程、定时器线程...

面试官:给我说说什么是同步异步?

今天是刘小爱自学Java的第95天。感谢你的观看,谢谢你。话不多说,开始今天的学习:一、同步、异步请求浏览器发送请求给服务器,其有同步请求和异步请求两种方式。1同步请求什么叫同步请求呢?就是在发送一个请求之后,需要等待服务器响应返回,才能够发送下一个请求。之前学的请求是通过浏览器地址栏发送请求,这种...

深入理解同步/异步与阻塞/非阻塞区别

编者按:高可用架构分享及传播在架构领域具有典型意义的文章,本文由「那谁」投稿。转载请注明来自高可用架构公众号「ArchNotes」。「那谁」,codedump.info 博主,多年从事互联网服务器后台开发工作。几年前曾写过一篇描写同步/异步以及阻塞/非阻塞的文章,最近再回头看,还存在一些理解和认知误...