高德地图正确食用方法（持续更新）

刚好最近有写一些地图，但是在网上，关于谷歌地图的使用方法其实并不多，基本都是自己去查API，所以今天就直接记录一下

在谷歌API中，有一个简易的创建地图的步骤，可以作为参考
准备
快速上手

初始化地图

方法一：

// public/index.html
// 第一步
<script type="text/javascript">window._AMapSecurityConfig = {serviceHost:'您的代理服务器域名或地址/_AMapService',  // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> // 第二步：设置代理
以 Nginx 反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。如果您使用了多个key，需要在代理设置中根据 key来映射不同的安全密钥。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/;}
}// 第三步: 重启代理
nginx -s reload

方法二：

// public/index.html
// 直接引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript" src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>// home.html
<template><div class="map" id="map"></div>
</template><script>
const { AMap } = window;
const MAP_STYLE = "amap://styles/b39a7bb780dbbc35c32fca3f343ebbbb";
export default {data() {return {map: null,};},mounted() {this.initAmap();},methods: {initAmap() {this.map = new AMap.Map("map", {resizeEnable: true, // 是否监控地图容器尺寸变化center: [120.345457, 36.144028], // 初始地图中心点zoom: 16.4, // 初始地图级别zooms: [14, 22],zoomEnable: true,dragEnable: true,labelzIndex: 0,mapStyle: MAP_STYLE, // 地图样式rotation: 34,viewMode: "2D",});},},
};
</script><style scoped>.map {width: 800px;height: 800px;}
</style>// 注意，index.html中引入的key值，和地图样式的mapStyle必须同属于一个账号下，不然不生效
// 一般的开发流程都是由公司提供key，UI提供mapStyle，但是可能会出现先暂时用自己的key
// 然后UI给出mapStyle的时候，把mapStyle绑定到自己本地就可以了

盘点经常在地图中遇到的需求

NO1：地图点位
地图点位实现参考

如图所示，这个就是地图点位，在API中，叫做地图覆盖物，他不一定是icon，也可能是圆圈，也可能是某一个区域

// 地图点位实现方式
// home.html
data() {return {positionData: [{ name: '点位1', longitude: 120.339426, latitude: 36.131395 },{ name: '点位2', longitude: 120.339274, latitude: 36.131652 }]}
}methods: {// 绘制点位// 一般点位都是一个集合，所以需要遍历drawPoint() {this.positionData.forEach((item) => { const maker = new AMap.Marker({position: [item.longitude, item.latitude],icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",size: [30, 40],zooms: [14, 22],// 偏移量offset: [0, 26],});this.map.add(maker);});}
}

点位弹窗
就是点击某个点位，弹出对应的数据
大概这样的

// 弹窗实现，一般会采用自定义窗口，可以一个方法循环所有的弹窗，也可以单独一个类别写一个弹窗方法
// 弹窗一般使用InfoWindow来实现，在高德地图中，一个地图，最多存在一个infoWindow，但是也可以用其他方式实现多个弹窗
<template><div><popupWindow ref="popup"/></div>
</template>const infoWindowPolygon = new AMap.InfoWindow({isCustom: true, // 使用自定义窗体offset: new AMap.Pixel(10, -35),
});
import popupWindow from './components'; // 弹窗组件// 在上面绘制点位的方法上面做一点点改进，新增一个点击事件
methods： {createDom(content) {return `<div>{{content}}</div>`},drawPoint() {this.positionData.forEach((item) => { const maker = new AMap.Marker({position: [item.longitude, item.latitude],icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",size: [30, 40],zooms: [14, 22],// 偏移量offset: [0, 26],});// 写法一：maker.on('click', e=> {// setContent打开的是一个dom，所以用refs取到当前组件的el，塞进去就好了infoWindowPolygon.setContent(this.$refs.popup.el);infoWindowPolygon.open(this.map, e.target.getPosition());               })// 写法二maker.on('click', e=> {const contentData = '这个是弹窗的数据'infoWindowPolygon.setContent(this.createDom(contentData));infoWindowPolygon.open(this.map, e.target.getPosition());})this.map.add(maker);});}
}

高德地图正确食用方法（持续更新）相关推荐

AI：大模型领域最新算法SOTA总结、人工智能领域AI工具产品集合分门别类(文本类、图片类、编程类、办公类、视频类、音频类、多模态类)的简介、使用方法(持续更新)之详细攻略
AI:大模型领域最新算法SOTA总结.人工智能领域AI工具产品集合分门别类(文本类.图片类.编程类.办公类.视频类.音频类.多模态类)的简介.使用方法(持续更新)之详细攻略导读:由于ChatGPT. ...
腾讯地图、高德地图去除logo方法
前言之前项目需要整合定位组件,于是将高德和腾讯都统一整理了一下,其中不可避免的需要将logo隐藏.但是地图api并没有提供隐藏logo的方法,只有设置logo的margin的方法. 腾讯地图遍历图 ...
Android开发之百度地图(soso地图，搜狗地图，阿里云地图)转高德地图经纬度的方法
//将百度地图经纬度转换为高德地图经纬度CoordinateConverter converter = new CoordinateConverter(this);// CoordType.BAIDU ...
安卓高德地图实时定位方法的封装
安卓地图的开发对于一个没有地图开发经验的人来说还是有点摸不着头脑的,我刚开始的时候就走了很多弯路,现在将自己实现的方法分享出来,供大家参考: 首先要去到高德地图的开方平台申请key值:点击打开链接然 ...
vue 中使用高德地图（原生方法）可搜索定位
需求:表单中的经纬度和位置需要通过高德地图定位点进行拾取,并且地图可以进行搜索,搜素出来的定位点也可进行点击获取位置 <template lang="html"> &l ...
win10打印机共享问题集，及解决方法持续更新
windows10连接打印机错误 kb0x0000011b win10打印机无法共享 win10共享打印机文末收集了最新解决方法微软于2021年11月22日发布的补丁KB5007253,此补丁有修复 ...
地图下载软件（持续更新）
GISer们在使用GIS时,常用到各种地图资源,除了测绘.购买数据外,还可以从网上找一些免费的地图资源,还有一个方法是使用一些地图下载器软件,这种软件一般都支持下载许多种地图的下载,有影像.地形.PO ...
[转]Clion2019破解-Jetbrains系列产品2019.1.1最新激活方法[持续更新]
原文链接大家熟知Jetbrains的话应该知道:他们家的所有产品升级到2018.2.1及以上版本后,先前可用的注册服务器都失效了,无法激活升级到最新版本体验最新黑科技. 这次要送的这份礼就是: Je ...
Android Studio 最新汉化包下载及安装方法,持续更新 IDEA
今天将 Android Studio 从 3.0 版更新到了 Android Studio Chipmunk | 2021.2.1 Patch 2 版(2021.2.1.16) 搜索 chinese ...

高德地图正确食用方法（持续更新）

刚好最近有写一些地图，但是在网上，关于谷歌地图的使用方法其实并不多，基本都是自己去查API，所以今天就直接记录一下

初始化地图

盘点经常在地图中遇到的需求

高德地图正确食用方法（持续更新）相关推荐

最新文章

热门文章