在vue中实现百度地图展示

在vue中实现百度地图展示

一:获取百度秘钥

都要写在index.html页面,否则无效

1申请一个百度秘钥在index.html中写,在其他vue里写会报错,而且实现不出来
2.如果不想百度地图的logo出来可以加上第9行

二: 创建地图

全局引入

Hello.vue

给地图创建一个div,给他个固定的宽高
<div id="content-container" style="padding-bottom:0;padding-top:0;width=800px;height=800px">
    <div id="map-container" class="map"></div>
</div>

  export default {
   
    data(){
   
      return {
   }
    }, 
     mounted(){
   
        this. map() //函数调用
     },
     methods:{
   
     //绘制地图
      map(){
   
	// 百度地图API功能
        var map = new BMap.Map("map-container");//获取id
        var point = (new BMap.Point(113.64964385, 34.7566100641));
        map.centerAndZoom(new BMap.Point(113.64964385, 34.7566100641), 12);  // 初始化地图,设置中心点坐标和地图级别
        // map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        // map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map