1.下载 vue-baidu-map
npm install vue-baidu-map --save
2.在main.js文件中导入，并全局定义
import BaiduMap from 'vue-baidu-map'Vue.use( BaiduMap, { ak : '百度地图生成的ak' } )
3.去掉百度logo
public文件下的index.html，加入以下代码
<style type="text/css">.BMap_cpyCtrl {display: none;}</style><style type="text/css">.anchorBL{display:none;}</style>
3.组件中使用
<template><div id="test"><baidu-map class="bm-view" @ready="init"><div v-for="item in maps" :key="item.id"><!-- 打点，遍历maps数组--><bm-marker :position="{lng: item.lng, lat: item.lat}"@click="lookDetail(item)"><!-- 标注，遍历出maps数组的每一项--><bm-label:content="item.deptname +item.zbmc":labelStyle="{ color: 'red', fontSize: '12px' }":offset="{ width: -35, height: 30 }"@click="lookDetail(item)"/><!-- 窗口 --><bm-info-window:title="showTitle":positon="{lng:infoWindow.lng,lat:infoWindow.lat}":offset="{ width: 150, height: 150 }":show="item.showFlag"@close="infoWindowClose(item)"@open="infoWindowOpen(item)"><!-- 窗口内容 --><div class="info-window"></div></bm-info-window></bm-marker><!-- 信息窗口 --></div></baidu-map></div></template><script>import {getPubJddmGisList} from "@/api/gis";export default {data() {return{map: "", // 地图// 站点信息数组maps:[{lng: 110.229321,lat: 25.227083,showFlag: false},{lng: 104.979273,lat: 25.096498,showFlag: false},],showTitle: "信息窗口",infoWindow: {lng:"",lat:"",},}}methods: {//地图方法init({BMap, map}) {this.deptGisList()let point = new BMap.Point(108.953723, 34.276202); //设置城市经纬度坐标map.centerAndZoom(point, 5); //地图缩放比例map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //鼠标滚动缩放},// 点击弹框lookDetail(item){this.infoWindow.lng = item.lng;this.infoWindow.lat = item.lat;item.showFlag = true; //showFlag来控制弹框展示和隐藏this.infoWindow = item;console.log(this.infoWindow);}infoWindowClose(item) {item.showFlag = false}infoWindowOpen(item) {item.showFlag = true}}}</script><style>.bm-view {width: 100%;height: 100vh;}</style>
