Vue引入百度地图

1.安装地图

npm install vue-baidu-map --save

2.在build文件夹中webpack.base.conf.js引入

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals: {
    'BMap': 'BMap',
    'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

3.index.html中引入

 <script  type="text/javascript"  src="http://api.map.baidu.com/getscript?v=3.0&ak=百度地图的ak"></script>

4.使用

<template>
    <div class="mapVue">
        <div id="map-core" class="map_marker"></div>
       <div class="markerTitle">
         Map Marker&Info Window
       </div>
       <img class="previous" src="../../assets/previous_btn.png" @click="goEchart">
       <img class="next" src="../../assets/next_btn.png" @click="goMapRoute">
      </div>
</template>
<style>
  @import "../../css/style.css";
</style>
<style scoped>
   @import "../../css/map_marker.css";
</style>
<script>
  import BMap from 'BMap'
  import {getAddress} from '../../service/map_marker_Service.js'
  import {getInverseAddress} from '../../service/map_marker_Service.js'


  export default {
        data() {
            return {
              visible: true,
               location:{
                 lng: '',
                 lat: '',
               },
              map: {},
              ac: {},
              point:'',
              inverseLng:'',
              inverseLat:'',
            }
        },

      created(){
      },
      mounted(){
      //请求百度地图api接口
        let params = {
          'address':'北京市朝阳区工体北路1号',
          'ak':'百度地图ak',
          'output':'json',
        };
        getAddress(params,sucessAddressCallBack, errorAddressCallBack);
        const  self = this;
        function sucessAddressCallBack(res) {
          if(res.data.status === 0){
            self.location.lng = res.data.result.location.lng;
            self.location.lat = res.data.result.location.lat;
            self.setMap()
          }
        };
        function errorAddressCallBack(err) {
          console.log(err);
        }
    },
      methods: {
        setMap () {
          this.map = new BMap.Map('map-core');
          const point = new BMap.Point(this.location.lng, this.location.lat);
          this.map.centerAndZoom(point, 10);
          const deviceSize = new BMap.Size(48,48);
         const self = this;
          let deviceIcon = '';
          let marker ='';
          deviceIcon = new BMap.Icon( require("@/assets/red_marker.png"), deviceSize,{imageSize: deviceSize})
          marker= new BMap.Marker(point, {icon: deviceIcon});

          this.map.addOverlay(marker);
          //TODO ①添加多个Marker与设置不同Marker图标
          function addMarker(point,type){
            if(type=='orange') {
              deviceIcon = new BMap.Icon( require("@/assets/orange_marker.png"), deviceSize,{imageSize: deviceSize})
            }
            if(type=='green') {
              deviceIcon = new BMap.Icon( require("@/assets/green_marker.png"), deviceSize,{imageSize: deviceSize})
            }
            var marker = new BMap.Marker(point);
            marker.setIcon(deviceIcon);
            self.map.addOverlay(marker);
          }
          let bounds = this.map.getBounds();
          let sw = bounds.getSouthWest();
          let ne = bounds.getNorthEast();
          let lngSpan = Math.abs(sw.lng - ne.lng);
          let latSpan = Math.abs(ne.lat - sw.lat);
          for (let i = 0; i < 5; i ++) {
            let point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            if(i%2==0){
              addMarker(point,'orange');
            }
            if(i%3==0){
              addMarker(point,'green');
            }
            marker = new BMap.Marker(point, {icon: deviceIcon});
            this.map.addOverlay(marker);
            marker.addEventListener("click", function (e) {
              console.log(e.currentTarget.point.lng);
              self.inverseLng =e.currentTarget.point.lng;
              self.inverseLat =e.currentTarget.point.lat;
              self.inverseAddress();
            });
          }
          this.map.enableScrollWheelZoom(true);
        },
        //TODO 根据点击Marker得到经纬度获取地址信息与InfoWindow
   
        inverseAddress(){
          let params={
            'location':this.inverseLat+','+this.inverseLng,
            'output':'json',
            'ak': '百度地图key',
          };
          getInverseAddress(params , inverseSuccessCall, inverseErrorCall);
          const self = this;
          function inverseSuccessCall(res){
            if(res.data.status == '0'){
              let address = res.data.result.formatted_address;
              let description = res.data.result.sematic_description;
              let content =  "<div id='markerInfo'>" +
                "<p style='margin:0 0 5px 0;padding:0.2em 0;color:"+'#232323'+"'>"+address+"</p>" +
                "<p style='margin:0 0 5px 0;padding:0.2em 0'>"+description+"</p>"+"</div>";
              let  infoWindow = new BMap.InfoWindow(content);
              let point = new BMap.Point(res.data.result.location.lng,res.data.result.location.lat);
              self.map.openInfoWindow(infoWindow, point);
            }

          }
          function  inverseErrorCall(err) {
            console.log(err);
          }


        },

        //路由
        goEchart(){
          this.$router.push({path:'/VueEchart'})
        },
        goMapRoute(){
          this.$router.push({path:'/map_route'})
        }
      },
 
    }
</script>