记录一下vue项目引入百度地图

公共部分

 #allmap {

            width: 500px;

            height: 500px;

         

            font-family: "微软雅黑";

        }

1、 

<div id="allmap">

<baidu-map  :center="center" :zoom="zoom" @ready="handler"></baidu-map>

</div>

  data() {

    return {

 // 定位位置

 center: {lng: 0, lat: 0},

    // 地图放大等级

      zoom: 3
}

}

 methods: {

      // 实例对象

      handler ({BMap, map}) {

      console.log(BMap, map)

      // 经度

      this.center.lng = 116.404

      // 纬度

      this.center.lat = 39.915

      // 地图放大等级

      this.zoom = 15

    }

}

2、index.html引入

 <script src="http://api.map.baidu.com/api?v=3.0&ak=0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ"></script>

<!-- 以下可选scirpt -->

<script type="text/javascript" src="https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js"></script>

  <script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js"></script>

  <script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script>

<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>

 mounted () {

 var map = new BMap.Map('allmap');

map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

}

3、单页面引入

<div id="allmap"></div>

 data() {

    return {

      ak:'0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ',

      script:{type:'',src:''}

}

}

 mounted () {

    this.$nextTick(function() {

        var _this = this;

        MP(_this.ak).then(BMap => {

          // 百度地图API功能

          var map = new BMap.Map("allmap")

          map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

        })

      })

}

import {MP} from '@/map.js'  

export function MP(ak) {  

    return new Promise(function (resolve, reject) {  

      window.onload = function () {  

        resolve(BMap)  

      }  

      var script = document.createElement("script");  

      script.type = "text/javascript";  

      script.src = "http://api.map.baidu.com/api?ak="+ak+"&callback=init";  

      script.onerror = reject;  

      document.head.appendChild(script);  

    })  

  }