vue引入百度地图map

一、申请百度地图密匙

二、在index.html中引入

<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>

三、在webpack.base.conf.js配置文件中配置BMap；

// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象)，在module.exports 中与entry平级；
  externals: {
    'BMap': 'BMap'
  },  

四、记得在地图组件中引入BMap

import BMap from 'BMap';

五、基本方法声明放入methods中，mounted钩子函数里面初始化

export default {
        name: "mymap",
    data(){
          return{
          map: ''
          }
    },
      mounted() {
        //创建和初始化地图函数：

        this.initMap();
      },
      methods: {
        //创建和初始化地图函数：
        initMap(){
        this.createMap();//创建地图

          // 这后面都错了我不知道为啥，说是什么map没有这个函数心痛
          //
        this.setMapEvent();//设置地图事件
        this.addMapControl();//向地图添加控件
        this.addMapOverlay();//向地图添加覆盖物
      },
      createMap(){
        this.map = new BMap.Map("map");
        this.map.centerAndZoom(new BMap.Point(121.406808,31.323843),19);
      },
      setMapEvent(){
        this.map.enableScrollWheelZoom=true;
        this.map.enableKeyboard=true;
        this.map.enableDragging=true;
        this.map.enableDoubleClickZoom=true
      },
      addClickHandler(target,window){
        target.addEventListener("click",function(){
          target.openInfoWindow(window);
        });
      },
      addMapOverlay(){
        var markers = [
        {content:"No. 99, Baoshan District Road, Shanghai",title:"College of computer engineering and science, Shanghai University",imageOffset: {width:0,height:3},position:{lat:31.323755,lng:121.406422}},
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
            imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
          })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        this.addClickHandler(marker,infoWindow);
        this.map.addOverlay(marker);
      };
    },
    //向地图添加控件
    addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      this.map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      this.map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      this.map.addControl(overviewControl);
    },
    }
    }

注意：真的这里很坑，不不不是因为我的 vue知识点一点也不全！  

首先如果我想要在各个函数之间都传递map，那么我可以设置一个全局变量或者可以把它放到vue的data里面； 

其次就是如果我在一个函数里面调用另外一个函数一定要加this！

对于chrome浏览器的警告：

A Parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.See https://www.chromestatus.com/feature/5718547946799104 for more details. 

(anonymous) @ api:1

意思就是说渲染完了之后出现了使用了document.write（）；

解决方式：把api？改成getscript？

警告就消失啦！！