Vue-cli项目中百度地图插件的使用

一、百度地图插件

1.1 百度地图基本使用

关于百度地图的基本使用在官方网站中有详细的介绍，可以参考以下链接：

百度地图开发平台https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

1.2 百度地图的使用步骤

1.2.1 申请密钥

我申请的密钥：F8DmsVlKvU5vBH9AB51j3Niw1sKzyW4R

百度地图的使用需要一个专属的密钥（ak）作为路径，具体申请流程如图：

在申请ak之前，首先要注册百度的账号，然后要申请成为百度开发者。完成以上两步之后才能去获取ak密钥。申请注册的步骤很简单，只需要按照提示申请即可，这里不再讲解。

1.2.1 引入

首先声明项目是使用Vue框架开发，百度地图只是其中的一个功能模块。要想使用百度地图插件，首先要做的便是将地图插件引入项目中。在脚手架项目的根目录的index.html中利用script标签引入，代码如下：

<script type="text/javascript"

    src="http://api.map.baidu.com/api?v=2.0&ak=F8DmsVlKvU5vBH9AB51j3Niw1sKzyW4R"></script>

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

1.2.2 地图组件开发

百度地图的“Hello, World”,开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用，快速创建一张“我的地图”。

Hello World示例

如下代码可以实现一个简单完整的全屏展示的地图Demo：

<template>
  <div class="hello">
    <div id="container">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
    this.mapdata();
  },
  methods: {
    mapdata() {
      var map = new BMap.Map("container");// 创建地图实例
        
      var point = new BMap.Point(116.404, 39.915); // 创建点坐标  
     
      map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别  
      
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 500px;
  margin: 0 auto;
}
#container {
  width: 500px;
  height: 300px;
}

</style>

浏览器效果：

 1.2.3 百度地图基本使用

需求说明：

• 利用vue-cli新建vue项目；
• 在项目中引用百度地图插件并使用百度地图添加标注等；
• 单击标注点，可查看由文本构成的复杂型信息窗口，页面效果如下：

 

 实现代码：

<template>
  <div class="hello">
    <div id="container">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
    this.mapdata();
  },
  methods: {
    mapdata() {
      var map = new BMap.Map("container");// 创建地图实例
        
      var point = new BMap.Point(116.404, 39.915); // 创建点坐标  
     
      map.centerAndZoom(point, 20);// 初始化地图，设置中心点坐标和地图级别  
      
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

      //添加缩略图控件
            map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
            //添加缩放平移控件
            map.addControl(new BMap.NavigationControl());
            //添加比例尺控件
            map.addControl(new BMap.ScaleControl());
            //添加地图类型控件
            //map.addControl(new BMap.MapTypeControl());
            
            //设置标注的图标
            var icon = new BMap.Icon(require("@/assets/icon.png"),new BMap.Size(100,100));
            //设置标注的经纬度
            var marker = new BMap.Marker(new BMap.Point(116.404,39.915),{icon:icon});
            //把标注添加到地图上
            map.addOverlay(marker);
            var content = "<table>";  
                content = content + "<tr><td> 天安门</td></tr>";  
                content = content + "<tr><td>坐落在中华人民共和国首都北京市的中心、故宫的南端</td></tr>"; 
                content = content + "<tr><td> 时间：2022-03-27</td></tr>";  
                content += "</table>";
            var infowindow = new BMap.InfoWindow(content);
            marker.addEventListener("click",function(){
                this.openInfoWindow(infowindow);
            });
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 500px;
  margin: 0 auto;
}
#container {
  width: 500px;
  height: 300px;
}

</style>

二、百度地图插件的综合运用实例

需求：完成多关键字检索

• 利用vue-cli新建vue项目；
• 在项目中引用百度地图插件并利用百度地图插件在ＨｅｌｌｏＷｏｒｌｄ组件中完成多关键字检索功能；
• 单击地图下方的列表项目，在地图上可以定位对应标注，显示当前列表的信息，项目运行页面效果如图：
• 

实现代码ｈｅｌｌｏｗｏｒｌｄ．ｖｕｅ：

<template>
  <div class="hello">
    <div id="l-map"></div>
    <div id="r-result"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
    this.map();
  },
  methods: {
    map() {
      // 百度地图API功能
      var map = new BMap.Map("l-map"); // 创建Map实例
      var point=new BMap.Point(116.307689,40.056974)
      map.centerAndZoom(point, 12);
      var myKeys = ["酒店", "加油站"];
      var local = new BMap.LocalSearch(map, {
        renderOptions: { map: map, panel: "r-result" },
        pageCapacity: 3
      });
      local.searchInBounds(myKeys, map.getBounds());
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 500px;
  margin: 0 auto;
}
#l-map {
  width: 500px;
  height: 300px;
}
#r-result {
  width: 300px;
}
</style>