vue3引入高德地图

文章目录

  • vue3引入高德地图
  • 前言
  • 一、准备工作
    • 1.开发文档
    • 2.添加应用
  • 二、使用步骤
    • 1.npm 安装
    • 2.地图容器创建
    • 3.组件引入
    • 4.js api 安全密钥
    • 5.初始化地图
    • 6. 图层
      • 6.1 添加 / 设置 / 获取 / 移除图层
        • 6.1.1 添加图层
        • 6.1.2 设置图层
        • 6.1.3 获取图层
        • 6.1.4 移除图层
    • 7. 点标记
    • 8. 信息窗体
      • 8.1 默认信息窗体
        • 8.1.1 默认信息窗体的创建
        • 8.1.2 信息窗体锚点的设置（anchor）
      • 8.2 自定义信息窗体
        • 8.2.1 自定义窗体的创建
        • 8.2.2 自定义信息窗体的偏移量（offset）
      • 8.3 信息窗体的打开关闭
    • 9.搜索
      • 9.1 引入和创建插件实例
      • 9.2 输入提示插件
      • 9.3 POI搜索

前言

 vue3项目中添加高德地图，后端人写前端的踩坑之旅，记录下来避免再次踩坑。

一、准备工作

1.开发文档

2.添加应用

注册账号 - 认证 - 控制台 - 应用 -我的应用 -添加 key


创建完应用点击添加key

web网页 选择 web端（js api）key名称随便写 域名白名单根据自己需求选择添加 最后勾选同意

注意：选 web端 才能生成安全密钥 调用api需要用到

二、使用步骤

1.npm 安装

代码如下：

npm i @amap/amap-jsapi-loader --save
npm install coordtransform  --涉及到坐标转换不想自己写的可以安装这个

2.地图容器创建

地图组件中创建 < div> 标签作为地图容器

<template><div class="home_div"><div id="container" style="height: 50vh; width: 100%"></div></div>
</template><style scope>.home_div{height: 100%;width: 100%;padding: 0px;margin: 0px;position: relative;}
</style>

3.组件引入

import AMapLoader from "@amap/amap-jsapi-loader"
import { reactive, ref, toRefs, onMounted, nextTick, defineProps } from 'vue';
import { shallowRef } from '@vue/reactivity'

4.js api 安全密钥

JS API 安全密钥以明文方式设置，不建议在生产环境使用（不安全）

<script setup>window._AMapSecurityConfig = {securityJsCode: '此处填应用生成的秘钥',
}
</script>

JS API 安全密钥通过代理服务器转发，强烈建议使用（安全）

server {listen       80;             #nginx端口设置，可按实际端口修改server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改# 自定义地图服务代理location /_AMapService/v4/map/styles {set $args "$args&jscode=您的安全密钥";proxy_pass https://webapi.amap.com/v4/map/styles;}# 海外地图服务代理location /_AMapService/v3/vectormap {set $args "$args&jscode=您的安全密钥";proxy_pass https://fmap01.amap.com/v3/vectormap;}# Web服务API 代理location /_AMapService/ {set $args "$args&jscode=您的安全密钥";proxy_pass https://restapi.amap.com/;}
}

5.初始化地图

var map = new AMap.Map('container', {viewMode: "3D",  //  是否为3D地图模式zoom: 10, //  地图显示的缩放级别zooms:[2,22], // 地图缩放范围center: arr, //  地图中心点坐标layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式resizeEnable: true  //  是否监控地图容器尺寸变化
});也可以使用 map.setMapStyle('amap://styles/whitesmoke') 来动态的设置地图样式。

6. 图层

地图在初始化的时候，如果你没有配置layers属性，JS API会默认添加一个标准图层，标准图层的配置为：

const layer = new AMap.createDefaultLayer({ // 提示：参数值并不是API默认使用的值zooms:[3,20],    //可见级别visible:true,    //是否可见opacity:1,       //透明度zIndex:0         //叠加层级
})
如果你想更改默认配置，你可以在初始化地图的时候传入你创建的 createDefaultLayer。
const map = new AMap.Map('container',{...otherOptions, // 其他配置layers:[layer]   // layer为你通过 new AMap.createDefaultLayer() 创建的默认图层
});

6.1 添加 / 设置 / 获取 / 移除图层

6.1.1 添加图层

地图上可使用add()方法添加各类型的图层，如高德官方的卫星、路网图层，第三方或是自定义图层等。

// 构造官方卫星、路网图层
var layer1 = new AMap.TileLayer.Satellite();
var layer2 =  new AMap.TileLayer.RoadNet();
var layers = [layer1,layer2
]
// 添加到地图上
map.add(layers);

6.1.2 设置图层

可以使用setLayers()方法设置图层，使用该方法后，地图图层会被重置。

// 构造官方卫星、路网图层
var layers =  [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
]
// 地图上设置图层
map.setLayers(layers);

6.1.3 获取图层

可以通过getLayers()方法获取地图图层数据

// 获取地图图层数据
map.getLayers();

6.1.4 移除图层

通过remove()方法移除地图图层

// 移除一个图层
map.remove(layer1);

7. 点标记

点标记适用于用户需要在地图上创建一个标记的场景。Marker 类型推荐在数据量为 500 以内时使用。若数据量大于 500 ，推荐使用 LabelMarker，可以获得更好的性能。另外需要地图标注可以避让用户标注时，也推荐使用 LabelMarker。

var marker = new AMap.Marker({icon: "",position: [经度, 纬度]
});
map.add(marker1);
map.setFitView();
// 删除已有Marker对象使用：map.remove(marker)。
// 可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。
// 多个点实例组成的数组
const markerList = [marker1, marker2, marker3];
map.add(markerList);
// 绑定Marker实例的事件
const clickHandler = function(e) {alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};
// 绑定事件
map.on('click', clickHandler);

8. 信息窗体

8.1 默认信息窗体

8.1.1 默认信息窗体的创建

默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式，这个时候只需要对 InfoWindow 设定 content 属性即可，content 可以是 dom 对象，也可以是 html 识别的字符串。

// 信息窗体的内容
var content = ["<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ","<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>","电话 : 010-84107000   邮编 : 100102","地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];// 创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
});// 打开信息窗体
infoWindow.open(map);

8.1.2 信息窗体锚点的设置（anchor）

通过 anchor 可以方便的设置锚点方位。anchor 可选值有 ‘top-left’、‘top-center’、‘top-right’、‘middle-left’、‘center’、‘middle-right’、‘bottom-left’、‘bottom-center’、‘bottom-right’ ， 分别代表了信息窗体锚点的不同方位。

var infoWindow = new AMap.InfoWindow({anchor: 'top-left',content: '这是信息窗体！',
});infoWindow.open(map,[116.401337,39.907886]);

8.2 自定义信息窗体

如果要自定义信息窗体内容，只需把 InfoWindow 的 isCustom 属性设置为 true ，信息窗体就会变成自定义信息窗体。与默认信息窗体的不同在于，自定义信息窗体需要自己通过 content 来实现关闭按钮以及全部外观样式，同时需要通过 offset 指定锚点位置，offset 为相对于 content 下边缘中间点的位移:

8.2.1 自定义窗体的创建

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var content = ["<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ","<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>","电话 : 010-84107000   邮编 : 100102","地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];// 实现自定义窗体内容，返回拼接后的字符串
function createInfoWindow (title, content){// 内容拼接 ...return content;
}// 创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({isCustom: true,  //使用自定义窗体content: createInfoWindow(title,content.join("<br>")),  //传入 dom 对象，或者 html 字符串offset: new AMap.Pixel(16, -50)
});

8.2.2 自定义信息窗体的偏移量（offset）

如果用户自定义信息窗体内容，可以为定义的内容添加偏移量（offset）。当偏移量为 (0, 0) 时，自定义内容默认以底部中部为基准点（若设置了 anchor，基准点位置则为 anchor 设置的位置）与经纬度坐标对齐；设置 offset 为其他值则对齐位置相应改变。具体偏移规则如下：

8.3 信息窗体的打开关闭

// 在指定位置打开已创建的信息窗体
var position = new AMap.LngLat(116.39, 39.9);
infoWindow.open(map, position);// 关闭信息窗体
infoWindow.close();

9.搜索

9.1 引入和创建插件实例

const placeSearch = new AMap.PlaceSearch({pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: true,  //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
// 使用插件搜索关键字并查看结果
placeSearch.search('北京大学');
// 自定义搜索结果 （如果你不想使用JS API的结果面板，panel可以缺省或者赋值false，然后可以在search()的回调中处理自己的逻辑。）
placeSearch.search('北京大学', function (status, result) {// 查询成功时，result即对应匹配的POI信息
});

9.2 输入提示插件

想实现类似在高德地图的输入框里输入文本片段即显示相关的匹配信息，使用输入提示插件AMap.AutoComplete就对了

AMap.plugin('AMap.AutoComplete', function(){var autoOptions = {//city 限定城市，默认全国city: '全国'};// 实例化AutoCompletevar autoComplete= new AMap.AutoComplete(autoOptions);// 根据关键字进行搜索autoComplete.search(keyword, function(status, result) {// 搜索成功时，result即是对应的匹配数据console.log(result);})
})

9.3 POI搜索

使用 AMap.PlaceSearch 获取搜索信息。

map.plugin('AMap.PlaceSearch', () => {let placeSearch = new AMap.PlaceSearch({city: '010', // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcodemap: map // 展现结果的地图实例})// 关键字搜索placeSearch.search(value, function (status, result) {// 监听标记点击事件AMap.Event.addListener(placeSearch, 'markerClick', function (data) {let result = data})        })
})

  如果喜欢的话，欢迎 												


											

【vue3引入高德地图】相关推荐
	

    
								
  1. vue3 引入高德地图实例
		
    vue3高德地图进阶版 地图引入进阶 文章末尾有完整代码 关于vue项目如何引入高德地图以及一些基础用法见上一篇文章
    
		
    2. 
						
  2. 前端系列19集-vue3引入高德地图，响应式，自适应
		
    npm i @amap/amap-jsapi-loader --save import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAP ...
    
		
    3. 
						
  3. vue3实现高德地图多点标注（so easy）
		
    vue3实现高德地图多点标注(so easy) 前言 思路清晰,抽丝剥茧 必要的准备工作 最简单的部分 处理数据之前(最关键的思路) 效果 完整代码 前言 非常感谢你能打开这篇博客,我想你一定是遇到了 ...
    
		
    4. 
						
  4. 在vue项目中引入高德地图并使用
		
    1.高德地图使用准备 开发之前的准备 需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
    
		
    5. 
						
  5. vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
		
    第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...
    
		
    6. 
						
  6. vue项目引入高德地图
		
    简单叙述 首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...
    
		
    7. 
						
  7. uniapp 打包app 引入高德地图sdk
		
    uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成 并配置到项目中 4. 地 ...
    
		
    8. 
						
  8. 企业微信公众号网页开发之引入高德地图API
		
    test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码 一.JS ...
    
		
    9. 
						
  9. uniapp h5 引入高德地图
		
    因地图收费.uniapp h5 是腾讯地图,公司为了少交一份钱,就改为引入高德地图 我才用是模板引入js 首先在项目跟根目录添加index.html <!DOCTYPE html> < ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Python脱产8期 Day02
		
    2. 
						
  2. 2018年全国多校算法寒假训练营练习比赛（第五场）题解
		
    3. 
						
  3. 摄像头光圈大小对景深的影响
		
    4. 
						
  4. SD--订单最小量限制的增强
		
    5. 
						
  5. 1.4 Hive和数据库的比较
		
    6. 
						
  6. 万能搜索监控ip工具_录像机搜不到摄像头IP可能是以下原因
		
    7. 
						
  7. webapp，ios  Safari打开新窗口
		
    8. 
						
  8. java轩辕剑天之痕游戏攻略_轩辕剑3外传天之痕攻略 全流程文字攻略(3)
		
    9. 
						
  9. idea保存快捷键_idea 快捷键
		
    10. 
						
  10. 计算机在录制声音过程中流向,Bandicam中录制电脑声音的具体流程介绍
		
    11. 
						
  11. 本地Blast2GO安装，及其数据库更新和导入数据中断的解决方案
		
    12. 
						
  12. 暗黑破坏神资源 - 紫冰整理
		
    13. 
						
  13. texstudio暗色主题2.0
		
    14. 
						
  14. 大话卫星导航中的信号处理系列文章——GPS信号L1频点的中频数据生成与验证
		
    15. 
						
  15. MATLAB app 实现音乐播放器
		
    16. 
						
  16. 计算机视觉会议和期刊分类
		
    17. 
						
  17. xstream异常com.thoughtworks.xstream.security.ForbiddenClassException
		
    18. 
						
  18. 关于Wechat 的充值
		
    19. 
						
  19. SourceMap 使用教程
		
    20. 
						
  20. android intelhaxm,Android和Intel HAXM的问题
		
    21. 
		

	


热门文章
	

    
									
  1. 【Spring】Bean的实例化过程
			
    2. 
						
  2. linux ip_conntrack_max,解?Linux NAT ip_conntrack: table full的方法
			
    3. 
						
  3. 电子商务站点资源收集~~~
			
    4. 
						
  4. R语言中的igraph包绘制网络图
			
    5. 
						
  5. 红队攻击：轻松玩转邮件钓鱼
			
    6. 
						
  6. 【软件工程】02组软件工程组队项目15周工作进度汇报——课程管理小助手
			
    7. 
						
  7. 计算机专业秃顶图片,大学被叫惨的三大专业，计算机秃顶是常事，医学专业这个就惨了！...
			
    8. 
						
  8. Oracle 中的Userenv() 达梦中如何处理？
			
    9. 
						
  9. 旭凤锦覓虐心 恋只愿共赴鸿蒙,香蜜：锦觅与旭凤4次同床，1次酒醉灵修，1次再续前缘，1次虐心！...
			
    10. 
						
  10. python精通能赚钱吗_月入3千到月入10万，精通数据分析的人到底有多赚？
			
    11.