vue实现百度地图（一）【1】引入并使用，展示

最新推荐文章于 2024-09-10 19:01:04 发布

System.out.print

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量2.1k

点赞数 3

分类专栏：百度地图文章标签： vue 百度地图

本文链接：https://blog.csdn.net/weixin_40841731/article/details/100989370

版权

百度地图专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、在index.html页面中添加

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body style="margin: 0">
    <div id="app"></div>
    <!-- 引入百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
  </body>
</html>

提醒：

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

中的 ak=xxxxxxxxxxxxxxxxxxxxxxx 是你自己的百度密匙

2、怎样获取百度密匙，看另一篇文章吧

3、新建一个baiduMap.vue

<template>
  <div >
    <div id="allmap">
      <div id="map"</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "baiduMap",
    data(){
      return {
        map: '',  //地图
      }
    },
    mounted() {
      this.map = new BMap.Map("allmap"); // 创建Map实例
      let _this = this;
      this.map.centerAndZoom("湖南");      // 初始化地图,用城市名设置地图中心点
      setTimeout(function(){
        function myFun(result){
          var cityName = result.name;
          _this.map.setCenter(cityName);
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
      }, 1000);
      setTimeout(function(){_this.map.setZoom(12);}, 1000); //1秒后放大到12级

      this.map.enableScrollWheelZoom(true);
      var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角，添加比例尺
      this.map.addControl(top_left_control);

      /!** 添加2D和卫星地图切换 *!/
      var mapType1 = new BMap.MapTypeControl(
        {
          mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        }
      );
      this.map.addControl(mapType1); //2D图，混合图
      /!** 添加定位 *!/
      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
          // 靠左上角位置
          anchor: BMAP_ANCHOR_TOP_LEFT,
          // LARGE类型
          type: BMAP_NAVIGATION_CONTROL_LARGE,
          // 启用显示定位
          enableGeolocation: true
        });
      this.map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
      });
      geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        alert(e.message);
      });
      this.map.addControl(geolocationControl);
    },
    methods: {}
  }
</script>
<style>
  #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>