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

àì夳堔傛蜴生んèń 2024-04-19 13:10 2阅读 0赞

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>

### 下一讲，添加地图地图检索功能 ###