vue中使用百度地图GL

一、第一种

第一步:在index.html 引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue使用百度地图GL</title>
    <script type="text/javascript" src="https://api.map.baidu.com/apiv=1.0&type=webgl&ak=AK&s=1"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

第二步:在webpack.base.conf.js配置文件中配置BMapGL

// 在webpack.base.conf.js配置文件中配置BMapGL,(创建BMapGL对象),在module.exports 中与entry平级;

  externals: {
    'BMapGL': 'BMapGL'
  },

第三步:在地图组件中引入BMapGL

<template>
  <div id="container"> </div>
</template>
import BMapGL from 'BMapGL'

export default {
  methods: {
    initMap() {
      this.myMap = new BMapGL.Map("container"); // 创建Map实例
      this.myMap.centerAndZoom("上海市", 7); // 初始化地图,设置中心点坐标和地图级别
      this.myMap.setMinZoom(5);//最小地图级别
      this.myMap.setMaxZoom(9);//最大地图级别
      this.myMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.myMap.setMapStyleV2(mapStyle);//自定义个性化样式
      this.myMap.setTilt(45);//倾斜角
      this.myMap.setDisplayOptions({//遮罩层
        skyColors: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)"]//不显示
      });
    },
  }
}

二、第二种

bmpgl.js

//BMapGL
export function BMPGL(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      // eslint-disable-next-line
      resolve(BMapGL);
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

map.vue

<template>
  <div id="container"> </div>
</template>
import { BMPGL } from "@/components/map/bmpgl.js";
import custom_map from "@/components/map/custom_map.json";

export default {
  name: "map",
  data() {
    return {
      ak: "0qKQ", // 百度的地图密钥
      myMap: null,
      greenIcon: null,
      purpleIcon: null,
      yellowIcon: null,
      redIcon: null,
      point: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      //传入密钥获取地图回调
      BMPGL(this.ak)
        .then(BMapGL => {
          // 创建地图实例
          let map = new BMapGL.Map("container");
          // 初始化地图,设置中心点坐标和地图级别
          // new BMapGL.Point(118.477, 31.346)
          map.centerAndZoom("芜湖市", 12);
          //开启鼠标滚轮缩放
          map.enableScrollWheelZoom(true);
          map.setMinZoom(9);
          map.setMaxZoom(13);
          map.setTilt(85);
          map.setMapStyleV2({ styleJson: custom_map });
          map.setDisplayOptions({
            skyColors: ["rgba(0, 0, 0, 0)"]
          });
        })
    },
    // 地址解析
    getPoint(location) {
      return new Promise((resolve, reject) => {
        let myGeo = new BMapGL.Geocoder();
        let point = null;
        myGeo.getPoint(location, point => {
          resolve(point);
        });
      });
    },
    //创建标记
    createMaker(state, point, content, option) {
      let maker = null;
      let steelContent = `<div class="padding-left-10">
          <div>单位资产信息:${content.assetsInfo}</div>
        </div>`;
      maker = new BMapGL.Marker(point, { icon: this.greenIcon });
      maker.addEventListener("mouseover", function() {
        this.openInfoWindow(new BMapGL.InfoWindow(steelContent, option));
      });
      maker.addEventListener("mouseout", function() {
        this.closeInfoWindow();
      });
      return maker;
    }
  }
};
.home {
  position: relative;
  .allmap {
    width: 100%;
    height: 450px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
  }
  .point {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
  }
}

三、第三种

// 安装插件
npm install vue-bmap-gl vue-mapvgl -S

main.js

// 引入vue-bmap-gl
import VueBMap from "vue-bmap-gl";
import VueMapvgl from "vue-mapvgl";
import "vue-bmap-gl/dist/style.css";

Vue.use(VueBMap);
Vue.prototype.VueBMap = VueBMap;
Vue.use(VueMapvgl);
Vue.prototype.VueMapvgl = VueMapvgl;

// 初始化vue-bmap
VueBMap.initBMapApiLoader({
  // 百度的key
  ak: "0wVRYQ",//用自己的百度地图ak
  // 百度 sdk 版本,默认为 1.0
  v: "1.0"
});

html

<template>
  <div class="home">
    <!--创建地图容器-->
    <div id="container" class="allmap">
      <el-bmap
        class="bmap-box"
        :zoom="zoom"
        :center="center"
        :tilt="50"
        :vid="'bmap-vue'"
        :mapStyleV2="mapStyleV2"
      >
        <el-bmap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :vid="index"
          :offset="[0, 0]"
          :icon="marker.icon"
          :visible="marker.visible"
          :position="marker.position"
          :title="marker.title"
          :status="1"
          :events="{
            mouseover(e) {
              overkMarker(e, 1);
            },
            mouseout(e) {
              outMarker(e, 1);
            }
          }"
        ></el-bmap-marker>
        <!-- mouseover(e) {
              overkMarker(e, 1);
            },
            mouseout(e) {
              outMarker(e, 2);
            } -->
        <el-bmap-info-window
          :title="currentWindow.title"
          :position="currentWindow.position"
          :visible="currentWindow.visible"
          :enable-auto-pan="false"
        >
          <template>
            <div>单位类型1</div>
            <div>单位类型2</div>
          </template>
        </el-bmap-info-window>
      </el-bmap>
    </div>
    <!-- 左下角标记 -->
    <div class="point">
      <div>
        <span class="green"></span>
        <span>单位类型1</span>
      </div>
      <div>
        <span class="blue"></span>
        <span>单位类型2</span>
      </div>
      <div>
        <span class="yellow"></span>
        <span>单位类型3</span>
      </div>
      <div>
        <span class="red"></span>
        <span>单位类型4</span>
      </div>
    </div>
  </div>
</template>

js

//样式文件在我的资源中,也可自己在百度地图个性化中配置,配置地址 http://lbsyun.baidu.com/apiconsole/custommap
import mapStyleV2 from "@/components/map/mapStyleV2.js";

export default {
  name: "mymap",
  data() {
    let redIcon = require("@/assets/images/red.png");
    let yellowIcon = require("@/assets/images/yellow.png");
    let purpleIcon = require("@/assets/images/purple.png");
    let greenIcon = require("@/assets/images/green.png");

    return {
      greenIcon,
      purpleIcon,
      yellowIcon,
      redIcon,
      mapStyleV2,
      zoom: 11,
      center: [118.477, 31.346],
      markers: [
        {
          position: [118.377, 31.246],
          title: "单位类型2",
          visible: true,
          icon: {
            url: redIcon,
            size: [12, 12]
          }
        },
        {
          position: [118.5273285, 31.21515044],
          title: "单位类型1",
          visible: true,
          icon: {
            url: greenIcon,
            size: [12, 12]
          }
        }
      ],
      currentWindow: {
        title: "",
        position: [118.377, 31.546],
        content: "hello",
        visible: false
      }
    };
  },
  methods: {
    overkMarker(e) {
      console.log("mouseover");
      this.currentWindow = {
        title: "标题",
        position: [e.latLng.lng, e.latLng.lat],
        content: `<div>
          <div>单位类型1<div>
          <div>技术类型2<div>
        </div>`,
        visible: true
      };
    },
    outMarker(e) {
      console.log("outMarker");
      this.currentWindow.visible = false;
    },
  }
};

scss

.home {
  position: relative;
  .allmap {
    width: 100%;
    height: 450px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
  }
  .point {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
    .green{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(0, 255, 0);
      border-radius: 50%;
    }
    .red{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(255, 0, 0);
      border-radius: 50%;
    }
    .yellow{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(251, 255, 0);
      border-radius: 50%;
    }
    .blue{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(247, 0, 255);
      border-radius: 50%;
    }
  }
}

效果图

(0)

相关推荐

  • vue-baidu-map覆盖层不动态刷新问题

    之前写着部分功能的时候都正常,今天要调试测试下,运行看到这个画圆居然不刷新,上一次的圆还在界面上,只有双击地图放大操作,地图重绘的操作才去掉历史覆盖层.奇怪的很 我这是引用vue-baidu-map三 ...

  • 从史上最热“五一”黄金周,聊聊中国人在百度地图大数据中“看”到什么

    根据文化和旅游部的统计,2021年"五一"假期期间全国国内旅游出游2.3亿人次,同比增长119.7%,按可比口径恢复至疫前同期的103.2%,全国5A级旅游景区接待游客约4800万 ...

  • 百度地图标注教程——让店铺可以轻松出现在百度地图中

    百度地图标注,是一个比较重要的事情. 如果店铺临街,门头清晰,可能会被地图主动收录. 如果没有,就需要自己去标注. 今天樱虎町日式咖喱蛋包饭,为大家分享地图标注的教程. 作为一个新店铺上线的基础教程, ...

  • 深入毛细血管供能细节规划,在未来城市中百度地图扮演了何种角色?

    在一个城市的日常生活中,出行体验可谓是决定了生活体验的重要因素:交通是否拥堵.公共交通设施分布是否合理.停车位好不好找--我们会发现,这些关乎日常出行是否通畅的小细节,其实都隶属于城市发展规划的一部分 ...

  • 这个五一,百度地图新能源导航拯救了我的旅程

    编辑丨钟立磊 春末夏初,夏至未至,五一假期可以说是最为怡人的假日时光.想想自己平常朝九晚五写稿,一到周末就只能宅在家里头,今天的小雷真的要笑出声来.好不容易能放个长假,那还不得赶紧出门玩玩? 整整五天 ...

  • 手机百度地图字体增大

    查看全文 2015-09-06 0 更多回答(3) 其他回答 3条回答 探索人生 你好! 手机百度地图显示的文字字体的大小好像是默认的不能更改的哦,手机百度地图有时候的定位不是很好用,我一般都是用腾讯 ...

  • 百度地图APP怎么切换到极速模式?

    我们平时使用的百度地图一般都是经典模式,不过在开车的时候还是极速模式比较适用,而且对我们的干扰也比较小,那么怎样切换到该模式呢? 下图一就是极速导航模式界面,可以看到界面非常简洁,我们只需按住底部的按 ...

  • setTimeout在vue中的正确使用

    笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数.遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(), ...

  • 百度地图采集员的日常被揭开:人与AI同频的样貌清晰可见

    上一份工作还是跟航空发动机相关,摇身一变成为专职地图采集员,是怎样一种神操作和体验? "我就觉得和我的梦想非常的接近." GIF 这是刚刚播出的,央视 CCTV-9纪录频道< ...

  • 百度地图APP怎么开启车牌限行?

    现在很多城市都有限行的规定,如果要去一个自己陌生的城市,那么很有必要开启手机导航的车牌限行功能,下面就是百度地图APP的开启方法! 进入到应用登录以后,点击左上角的头像,然后就会跳转到图二所示的个人中 ...