| 前端系列19集 | 您所在的位置：网站首页 › 怎么在高德地图里面添加位置 › 前端系列19集 |
前端系列19集
|
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: `XXX信息`, //信息窗体的内容可以是任意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.AutoComplete', 'AMap.AutoComplete', '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.AutoComplete', // 'AMap.AutoComplete', // '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() // }) // }) import { AmapLoader, AmapMap } from '@amap/amap-jsapi-loader'; export default { name: 'MapComponent', mounted() { AmapLoader.load({ key: '你的高德地图API密钥', version: '2.0', plugins: ['AMap.Geolocation'], }).then((AMap) => { const map = new AMap.Map('mapContainer', { center: [经度, 纬度], zoom: 缩放级别, }); // 在这里你可以使用各种高德地图的功能，例如添加标记、绘制路线等 // 当你需要使用地图组件时，你可以使用AmapMap组件 Vue.component('AmapMap', AmapMap); }); }, };请确保替换代码中的你的高德地图API密钥为你自己的API密钥，以及经度、纬度和缩放级别为合适的值。 使用在其他Vue组件中显示地图。 在其他的Vue组件中，你可以使用标签来显示地图： 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中引入高德地图时，如果地图拖动不了其他地方，可能是由于以下原因： 容器尺寸问题：检查包裹地图的容器元素的尺寸设置。确保容器具有足够的宽度和高度以容纳地图，并且不会被其他元素覆盖。 CSS 样式问题：检查容器元素的 CSS 样式，确保没有设置不正确的定位或溢出属性。地图容器应该使用适当的 CSS 属性（例如position: relative）来确保地图可以正确地进行定位和拖动。 脚本加载问题：确认高德地图的相关脚本和依赖已经正确加载，并且没有出现任何错误或警告。可以检查浏览器的开发者工具控制台，查看是否有与地图加载相关的错误信息。 地图初始化设置：检查地图初始化设置，包括缩放级别、中心点位置和视图模式。确保这些设置正确，以便在地图加载后能够正确显示和拖动地图。如果问题仍然存在，可以提供更多关于你的代码和具体情况的信息，以便更好地理解问题并提供更精确的帮助。 //进行地图初始化 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.com/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' }) } 地图的创建 地图显示 html, body, #container { width: 100%; height: 100%; } var map = new AMap.Map('container', { resizeEnable: true, //是否监控地图容器尺寸变化 zoom:11, //初始化地图层级 center: [116.397428, 39.90923] //初始化地图中心点 }); 地图加载完成 地图加载完成事件 map.on("complete") html, body, #container { width: 100%; height: 100%; } 地图加载完成 var map = map = new AMap.Map('container', { resizeEnable: true }); map.on("complete", function(){ log.success("地图加载完成！"); }); 地图的销毁 地图的销毁 map.destroy html, body, #container { width: 100%; height: 100%; } 地图创建与销毁 创建、销毁地图 创建地图 销毁地图 var map = null; function createMap() { map = new AMap.Map('container', { resizeEnable: true }); log.success("创建地图成功"); } function destroyMap() { map && map.destroy(); log.info("地图已销毁"); } //初始化地图 createMap(); //绑定创建、销毁事件 document.querySelector("#create-btn").onclick = createMap; document.querySelector("#destroy-btn").onclick = destroyMap; 异步加载地图 给JSAPI引用地址url加上callback参数，异步调用JSAPI接口。 异步加载地图 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.com/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); 中、英文地图 英文地图显示，英文、中英文、中文地图之间动态切换 英文、中英文地图 html, body, #container { width: 100%; height: 100%; } 底图语言切换 英文底图 中英文对照 中文底图 //初始化地图 var map = new AMap.Map('container', { resizeEnable: true, center: [121.498586, 31.239637], lang: "en" //可选值：en，zh_en, zh_cn }); //绑定radio点击事件 var radios = document.querySelectorAll("#lang input"); radios.forEach(function(ratio) { ratio.onclick = setLang; }); function setLang() { map.setLang(this.id); } 设置/获取地图显示范围 通过map.getBounds、map.getBounds设置/获取地图显示范围 地图显示范围 html, body, #container { width: 100%; height: 100%; } .lnglat { color: #0288d1; } 当前地图显示范围（Bounds） NorthEast坐标： SouthWest坐标： 控制地图显示范围 指定地图显示范围 //创建地图 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); } 地图的平移 除了鼠标、触摸交互，通过map.panBy和map.panTo也可以移动地图 地图平移 html, body, #container { width: 100%; height: 100%; } 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]); }); 获取鼠标点击经纬度 给地图绑定click事件，获取鼠标位置的经纬度坐标。 鼠标拾取地图坐标 html,body{ width: 100%; height: 100%; margin: 0px; } .map{ height: 100%; width: 100%; float: left; } 左击获取经纬度： var map = new AMap.Map("container", { resizeEnable: true }); //为地图注册click事件获取鼠标点击出的经纬度坐标 map.on('click', function(e) { document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat() }); 设置鼠标样式 设置鼠标样式 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; } //初始化地图对象，加载地图 var map = new AMap.Map("container", { resizeEnable: true }); //使用CSS默认样式定义地图上的鼠标样式 map.setDefaultCursor("pointer"); //自定义鼠标样式图标 function switchCursor(target) { var value = target.value; map.setDefaultCursor(value); } 隐藏文字标注 showLabel设定为 false 隐藏文字标注 地图文字标记开关 html, body, #container { width: 100%; height: 100%; } //初始化地图 var map = new AMap.Map('container', { showLabel: false //不显示地图文字标记 }); 响应式 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私有化部署 一台云服务器 云服务器上已安装Docker 了解Docker基础 部署和使用公共密钥公共密钥可以在所有项目中使用，添加读写权限。部署后可以为git仓库的使用或者配合其他平台做自动化流程提供便利。 选择“部署密钥”，点击“新建部署密钥”
填入标题和ssh公钥，ssh密钥的生成参考官网这里 进入某个具体的项目（如没有则新建一个），点击“设置” => “仓库” “部署密钥”展开 => 选择“公开访问的部署密钥” => 启用对应的公共密钥 “已启用的部署密钥” => 选择对应的公共密钥，点击编辑 => 打钩“授予此密钥写入权限” 保存更改 点击 “标签推送事件”，Jenkins自动触发一次构建，则配置成功 juejin.cn/post/724210… 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全局凭据 类型：选择“SSH Username with private key” Username： 填写GitLab用户名 Enter directly：选中后，将生成的ssh密钥的私钥填入 Passphrase：如果生成ssh密钥对时设置了就填写设置的内容，未设置就不需要填写Jenkins新建任务，选择 “构建一个自由风格的软件项目” 源码管理：选择Git，进行配置 安装插件时选择“安装推荐的插件” Git Plugin会自动安装，才会出现这个Git选项。否则需要先手动安装Git Plugin 地址填写基于ssh的仓库地址 凭据选择之前创建的全局凭据 GitLab侧需要同步配置，将ssh的公钥作为项目的部署密钥，这一步参考GitLab私有化部署 移动端适配及PC端适配心得总结体会(二)juejin.cn/post/688572… 加群联系作者vx：xiaoda0423 仓库地址：github.com/webVueBlog/… |
【本文地址】
公司简介
联系我们