vue-百度地图自定义主题框选区域设置模态框

赵文晔

于 2021-01-14 12:41:15 发布

阅读量778

点赞数 1

分类专栏：笔记文章标签： js

本文链接：https://blog.youkuaiyun.com/m0_47480813/article/details/112604221

版权

本文介绍了如何在Vue项目中结合vue-baidu-map库实现百度地图的自定义主题，创建框选区域并设置模态框功能。详细步骤包括引入vue-baidu-map组件，全局注册，以及在页面模板和样式中设置数据和方法，其中styleJson支持通过id进行个性化配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

1.首先，引入vue-baidu-map，对应的命令是

npm install vue-baidu-map --save

2.然后，在main.js中完成全局注册

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 
  ak: '您的ak密钥'
})

3.页面中应用
template

 <div class="BMapbubblecontent" id="more" v-show="moreButtonList">
      <span>热力站：{
  { heatMapList.name }}</span
      ><br />
      <span>供热面积：{
  { heatMapList.servArea }}m²</span><br />
      <span>一次回温：{
  { heatMapList.fnBackTemp }}℃</span><br />
      <span>二次回温：{
  { heatMapList.snBackTemp }}℃</span><br />
      &