前端系列19集-vue3引入高德地图,响应式,自适应

前端系列19集-vue3引入高德地图,响应式,自适应

npm i @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI,可以避免异步加载、重复加载等常见错误加载错误
//为地图注册click事件获取鼠标点击出的经纬度坐标 
map.on("click", function (e: any) { 
// 点击事件 
}); let infoWindow = new AMap.InfoWindow({ 
//创建信息窗体 
isCustom: false, 
//使用自定义窗体 
anchor: "top-right", 
//信息窗体的三角所在位置 
content: `<a href="#">XXX信息</a>`, 
//信息窗体的内容可以是任意html片段 
offset: new AMap.Pixel(-10, -5), }); 
infoWindow.open(map, [116.397128, 39.916527]); 
//填写想要窗体信息指示的坐标
import AMapLoader from '@amap/amap-jsapi-loader';
export function loadAMap() {
  return new Promise(function (resolve, reject) {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.Auto***plete',
        'AMap.Auto***plete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
      ], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}

import AMapLoader from '@amap/amap-jsapi-loader'

要在Vue 3中引入高德地图,你可以按照以下步骤进行操作:

在项目目录中使用npm或yarn安装高德地图的JavaScript API库。你可以使用以下命令之一:

npm install @amap/amap-jsapi-loader

yarn add @amap/amap-jsapi-loader

在Vue组件中引入并使用高德地图。

在你的Vue组件中,你可以使用AmapLoader从高德地图加载API,然后在地图准备好后使用AmapMap组件进行展示。以下是一个简单的示例:

// return new Promise(function (resolve, reject) {
    //     AMapLoader.load({
    //         key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
    //         version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    //         plugins: [
    //             'AMap.ControlBar',
    //             'AMap.LineSearch',
    //             'AMap.StationSearch',
    //             'AMap.PolylineEditor',
    //             'AMap.PolygonEditor',
    //             'AMap.CircleEditor',
    //             'AMap.Auto***plete',
    //             'AMap.Auto***plete',
    //             'AMap.DistrictSearch',
    //             'AMap.PlaceSearch',
    //             'AMap.MouseTool'
    //         ] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    //     })
    //         .then((AMap: any) => {
    //             const map = new AMap.Map('container', {
    //                 //设置地图容器id
    //                 viewMode: '3D', //是否为3D地图模式
    //                 zoom: 5, //初始化地图级别
    //                 center: [116.397428, 39.90923] //初始化地图中心点位置
    //             })
    //         })
    //         .catch((e: any) => {
    //             console.log(e)
    //             reject()
    //         })
    // })
<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import { AmapLoader, AmapMap } from '@amap/amap-jsapi-loader';

export default {
  name: 'Map***ponent',
  mounted() {
    AmapLoader.load({
      key: '你的高德地图API密钥',
      version: '2.0',
      plugins: ['AMap.Geolocation'],
    }).then((AMap) => {
      const map = new AMap.Map('mapContainer', {
        center: [经度, 纬度],
        zoom: 缩放级别,
      });

      // 在这里你可以使用各种高德地图的功能,例如添加标记、绘制路线等

      // 当你需要使用地图组件时,你可以使用AmapMap组件
      Vue.***ponent('AmapMap', AmapMap);
    });
  },
};
</script>

请确保替换代码中的你的高德地图API密钥为你自己的API密钥,以及经度纬度缩放级别为合适的值。

使用<Map***ponent>在其他Vue组件中显示地图。

在其他的Vue组件中,你可以使用<Map***ponent>标签来显示地图:

const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })
//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在,则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    // 创建一个新的 AMap.Map 实例,并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })

    AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })
}
AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })

在Vue 3中引入高德地图时,如果地图拖动不了其他地方,可能是由于以下原因:

  1. 容器尺寸问题:检查包裹地图的容器元素的尺寸设置。确保容器具有足够的宽度和高度以容纳地图,并且不会被其他元素覆盖。

  2. CSS 样式问题:检查容器元素的 CSS 样式,确保没有设置不正确的定位或溢出属性。地图容器应该使用适当的 CSS 属性(例如position: relative)来确保地图可以正确地进行定位和拖动。

  3. 脚本加载问题:确认高德地图的相关脚本和依赖已经正确加载,并且没有出现任何错误或警告。可以检查浏览器的开发者工具控制台,查看是否有与地图加载相关的错误信息。

  4. 地图初始化设置:检查地图初始化设置,包括缩放级别、中心点位置和视图模式。确保这些设置正确,以便在地图加载后能够正确显示和拖动地图。

如果问题仍然存在,可以提供更多关于你的代码和具体情况的信息,以便更好地理解问题并提供更精确的帮助。

//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在,则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    const lineArr = data.map((item) => [item.longitude, item.latitude])

    // 创建一个新的 AMap.Map 实例,并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        center: [116.397428, 39.90923]
    })

    const marker = new AMap.Marker({
        // Map: 要显示该marker的地图对象
        map: map,
        // LngLat: 点标记在地图上显示的位置,默认为地图中心点,数组类型的格式也可以
        // 或 position: new AMap.LngLat(116.478935, 39.997761),
        position: lineArr[0],
        // String/Icon: 需在点标记中显示的图标。可以是一个本地图标地址,或者Icon对象。有合法的content内容时,此属性无效
        icon: 'https://webapi.amap.***/images/car.png',
        /*
        Pixel: 点标记显示位置偏移量,默认值为Pixel(-10,-34)
        Marker指定position后,默认以marker左上角位置为基准点,对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量
        */
        offset: new AMap.Pixel(-26, -13),
        // Boolean: 是否自动旋转。点标记在使用moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认为false。广泛用于自动调节车辆行驶方向
        autoRotation: true,
        // Number: 点标记的旋转角度,广泛用于改变车辆行驶方向
        angle: -90
    })

    // 绘制整条轨迹
    const polyline = new AMap.Polyline({
        // Map: 要显示该polyline的地图对象
        map: map,
        // Array: 折线的节点坐标数组
        path: lineArr,
        // Boolean: 是否延路径显示白色方向箭头,默认false。Canvas绘制时有效,建议折线宽度大于6时使用
        showDir: true,
        // String: 线条颜色,使用16进制颜色代码赋值。默认值为#006600
        strokeColor: '#28F',
        // Number: 线条透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
        strokeOpacity: 1,
        // Number: 线条宽度,单位:像素
        strokeWeight: 6,
        // String: 线样式,实线:solid,虚线:dashed
        strokeStyle: 'solid'
    })
}

地图的创建

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
</script>
</body>
</html>

地图加载完成

地图加载完成事件 map.on("***plete")

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>地图加载完成</title>
</head>

<body>
  <div id="container"></div>
  <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.***/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = map = new AMap.Map('container', {
        resizeEnable: true
    });
    
    map.on("***plete", function(){
       log.su***ess("地图加载完成!");  
    });
  </script>
</body>

</html>

地图的销毁

地图的销毁 map.destroy

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>地图创建与销毁</title>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:16rem">
    <h4>创建、销毁地图</h4>
    <div id="btns">
      <div class="input-item">
        <button id="create-btn" class="btn" style="margin-right:1rem;">创建地图</button>
        <button id="destroy-btn" class="btn">销毁地图</button>
      </div>
    </div>
  </div>
  <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.***/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = null;

    function createMap() {
      map = new AMap.Map('container', {
        resizeEnable: true
      });
      log.su***ess("创建地图成功");
    }

    function destroyMap() {
      map && map.destroy();
      log.info("地图已销毁");
    }

    //初始化地图
    createMap();

    //绑定创建、销毁事件
    document.querySelector("#create-btn").onclick = createMap;
    document.querySelector("#destroy-btn").onclick = destroyMap;
  </script>
</body>

</html>

异步加载地图

给JSAPI引用地址url加上callback参数,异步调用JSAPI接口。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>异步加载地图</title>
    <link rel="stylesheet" href="https://cache.amap.***/lbs/static/main1119.css"/>
</head>
<body>
<div id="container"></div>
<script>
    function onApiLoaded(){
        var map = new AMap.Map('container', {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
     var url = 'https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
</script>
</body>
</html>

中、英文地图

英文地图显示,英文、中英文、中文地图之间动态切换

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>英文、中英文地图</title>
  <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:13rem">
    <h4>底图语言切换</h4>
    <div id="lang">
      <div class="input-item"><input id="en" name="language" type="radio" checked="checked"><span class="input-text">英文底图</span></div>
      <div class="input-item"><input id="zh_en" name="language" type="radio"><span class="input-text">中英文对照</span></div>
      <div class="input-item"><input id="zh_***" name="language" type="radio"><span class="input-text">中文底图</span></div>
    </div>
  </div>
  <script src="https://cache.amap.***/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      center: [121.498586, 31.239637],
      lang: "en" //可选值:en,zh_en, zh_***
    });

    //绑定radio点击事件
    var radios = document.querySelectorAll("#lang input");
    radios.forEach(function(ratio) {
      ratio.onclick = setLang;
    });

    function setLang() {
      map.setLang(this.id);
    }
  </script>
</body>

</html>

设置/获取地图显示范围

通过map.getBounds、map.getBounds设置/获取地图显示范围

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地图显示范围</title>
  <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    .lnglat {
      color: #0288d1;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>当前地图显示范围(Bounds)</h4>
    <p>NorthEast坐标:<span id="ne" class="lnglat"></span></p>
    <p>SouthWest坐标:<span id="sw" class="lnglat"></span></p>
  </div>
  <div class="input-card" style="width:16rem;">
    <h4>控制地图显示范围</h4>
    <div class="input-item">
      <button class="btn" id="reset-bounds">指定地图显示范围</button>
    </div>
  </div>
  <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.***/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //创建地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 10,
      center: [116.405285, 39.904989],
      showIndoorMap: false
    });

    //显示当前地图边界范围坐标
    function logMapBounds() {
      var bounds = map.getBounds();
      document.querySelector("#ne").innerText = bounds.northeast.toString();
      document.querySelector("#sw").innerText = bounds.southwest.toString();
    }

    logMapBounds();

    //绑定地图移动与缩放事件
    map.on('moveend', logMapBounds);
    map.on('zoomend', logMapBounds);

    //绑定按钮事件
    document.querySelector("#reset-bounds").onclick = function() {
      //通过 new AMap.Bounds(southWest:LngLat, northEast:LngLat) 或者 map.getBounds() 获得地图Bounds信息
      var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
      map.setBounds(mybounds);
    }
  </script>
</body>

</html>

地图的平移

除了鼠标、触摸交互,通过map.panBy和map.panTo也可以移动地图

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图平移</title>
    <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.***/lbs/static/addToolbar.js"></script>
   
   <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto">
    <div class="input-item">
        <input id="piexBtn" type="button" class="btn" value="平移像素值:(50,100)"/>
    </div>
    <div class="input-item">
        <input id="pantoBtn" type="button" class="btn" value="地图中心点平移至:(116.405467,39.907761)"/>
    </div>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13,
        center: [116.397428, 39.90923]
    });

    AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
        map.panBy(50, 100);
    });
    AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
        map.panTo([116.405467, 39.907761]);
    });
</script>
</body>
</html>

获取鼠标点击经纬度

给地图绑定click事件,获取鼠标位置的经纬度坐标。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标</title>
    <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.***/lbs/static/addToolbar.js"></script>
</head>
<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .map{
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
    <h4>左击获取经纬度:</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat">
    </div>
</div>

<script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Auto***plete"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
</script>
</body>
</html>

设置鼠标样式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>设置鼠标样式</title>
    <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="https://at.alicdn.***/t/font_873139_0v65kqy674.css" >
    <script type="text/javascript"
            src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.***/lbs/static/addToolbar.js"></script>
    
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
        .input-card {
            width: 70px;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="container" class="map"></div>
<ul id="cursorList" class="input-card">
    <li>
        <input name="cursor" value="default" type="radio" onclick="switchCursor(this)" checked>
        <span class="iconfont icon-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="pointer" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon--Hand-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="move" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cursor-move"></span>
    </li>
    <li>
        <input name="cursor" value="crosshair" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cross"></span>
    </li>
</div>
<script type="text/javascript">
    //初始化地图对象,加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    //使用CSS默认样式定义地图上的鼠标样式
    map.setDefaultCursor("pointer");
    
    
    //自定义鼠标样式图标
    function switchCursor(target) {
        var value = target.value;
        map.setDefaultCursor(value);
    }
</script>
</body>
</html>

隐藏文字标注

showLabel设定为 false 隐藏文字标注

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地图文字标记开关</title>
  <link rel="stylesheet" href="https://a.amap.***/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://cache.amap.***/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.***/maps?v=1.4.15&key=您申请的key值"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      showLabel: false //不显示地图文字标记
    });
  </script>
</body>

</html>

响应式 vs. 自适应

  • 媒体查询,边界断点的规则设定(Media queries && break point)

  • 内容的可伸缩性效果(Flexibel visuals)

  • 流式网格布局(Fluid grids)

  • 主要内容呈现及图片的高质量(Main content and high quality)

通常认为,RWD 是 AWD 的子集

RWD:Ethan Marcote 的文章是大家认为 RWD 的起源。他提出的 RWD 方案是通过 HTML 和 CSS 的媒体查询技术,配合流体布局实现。RWD 倾向于只改变元素的外观布局,而不大幅度改变内容。Jeffrey Zeldman 总结说,我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术

AWD:Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 AWD 在包括 RWD 的 CSS 媒体查询技术以外,也要用 Javascript 来操作 HTML 来更适应移动设备的能力。AWD 有可能会针对移动端用户减去内容,减去功能。AWD 可以在服务器端就进行优化,把优化过的内容送到终端上。

设备独立像素 = CSS 像素 = 逻辑像素

GitLab私有化部署

  1. 一台云服务器

  2. 云服务器上已安装Docker

  3. 了解Docker基础

部署和使用公共密钥

公共密钥可以在所有项目中使用,添加读写权限。部署后可以为git仓库的使用或者配合其他平台做自动化流程提供便利。

image.png

选择“部署密钥”,点击“新建部署密钥”

https://docs.gitlab.***/jh/user/ssh.html#generate-an-ssh-key-pair

填入标题和ssh公钥,ssh密钥的生成参考官网这里[1]进入某个具体的项目(如没有则新建一个),点击“设置” => “仓库”

“部署密钥”展开 => 选择“公开访问的部署密钥” => 启用对应的公共密钥

“已启用的部署密钥” => 选择对应的公共密钥,点击编辑 => 打钩“授予此密钥写入权限” 保存更改

image.png

1. 安装GitLab 插件

2. 配置触发时机

  1. 选择“Build when a change is pushed to GitLab”

  2. 点击Generate 生成一个Secret token

使用Docker安装Jenkins

image.png
image.png

GitLab webhooks

  1. 填写url,这个url就在Jenkins “Build when a change is pushed to GitLab” 后面

  2. 填写Jenkins刚刚生成的secret token

  3. 触发来源勾选“标签推送事件”

  4. SSL 验证取决于你的Jenkins服务是http还是https,如果是http就取消勾选

image.png
image.png

webhooks

点击 “标签推送事件”,Jenkins自动触发一次构建,则配置成功

image.png

https://juejin.***/post/7242105983136448573

docker run --name docker_jenkins --privileged=true -itd -p 8080:8080 -p 50000:50000 --restart=on-failure -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts-jdk11

  • --name:自定义容器名称

  • --privileged=true:赋予该容器更高的权限。几乎与宿主机上的root用户拥有相同的权限。能够在容器中使用docker命令

  • -itd :容器内增加交互终端

  • -v jenkins_home:/var/jenkins_home:存储Jenkins数据,这几乎是必须的。如果不设置,重启Jenkins容器后,Jenkins将会被重置

安装成功后,访问服务器8080端口

  • 打印Jenkins日志:docker logs -f [container_id]。日志中就存有初始化的管理员密码

  • 进入容器内部,根据提示找到初始密码所在位置查看

    • 进入容器:docker exec -it [container_id] bash

    • 查看密码:cat /var/jenkins_home/secrets/initialAdminPassword

image.png
image.png
image.png

全局凭据

  1. 类型:选择“SSH Username with private key”

  2. Username: 填写GitLab用户名

  3. Enter directly:选中后,将生成的ssh密钥的私钥填入

  4. Passphrase:如果生成ssh密钥对时设置了就填写设置的内容,未设置就不需要填写

image.png
image.png

拉取GitLab仓库代码

  1. Jenkins新建任务,选择 “构建一个自由风格的软件项目”

  2. 源码管理:选择Git,进行配置

    1. 安装插件时选择“安装推荐的插件” Git Plugin会自动安装,才会出现这个Git选项。否则需要先手动安装Git Plugin

    2. 地址填写基于ssh的仓库地址

    3. 凭据选择之前创建的全局凭据

    4. GitLab侧需要同步配置,将ssh的公钥作为项目的部署密钥,这一步参考GitLab私有化部署[2]

移动端适配及PC端适配心得总结体会(二)

https://juejin.***/post/6885721051360133133#heading-11

image.png

WebSocket

let _ws: WebSocket | null = null

export function initWebSock(vm: Vue) {

  _ws = new WebSocket('')

  _ws.addEventListener('open', (e) => {
  })

  _ws.addEventListener('message', (e: any) => {

  })
}

加群联系作者vx:xiaoda0423

仓库地址:https://github.***/webVueBlog/WebGuideInterview

参考资料

[1]

https://docs.gitlab.***/jh/user/ssh.html#generate-an-ssh-key-pair: https://link.juejin.***/?target=https%3A%2F%2Fdocs.gitlab.***%2Fjh%2Fuser%2Fssh.html%23generate-an-ssh-key-pair

[2]

https://juejin.***/post/7242007082920312888#heading-6: https://juejin.***/post/7242007082920312888#heading-6

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端系列19集-vue3引入高德地图,响应式,自适应

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买