web端使用高德地图

web端使用高德地图

    • 一、申请高德key和秘钥
    • 二、在项目中引入所需功能js、css文件
    • 三、实现地图选点、回显选点
    • 四、自定义地图

一、申请高德key和秘钥

  • 申请高德key
    在这里插入图片描述
  • 申请成功后可以得到key
    在这里插入图片描述

二、在项目中引入所需功能js、css文件

<script src="https://webapi.amap.com/maps?v=2.0&key=XXXXXXXXXXXXX"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<scripttype="text/javascript"src="https://webapi.amap.com/demos/js/liteToolbar.js"
></script>

三、实现地图选点、回显选点

<template><el-dialog title="选择地址" :visible.sync="MapVisible" width="960px"><el-formref="Addressform":model="Addressform":rules="Addressrules"label-width="65px"><el-row><el-col :span="6"><el-form-item label="省" prop="province"><el-selectv-model="Addressform.provinceId"placeholder=""filterablestyle="width: 100%"@change="changeProvince"><el-optionv-for="dict in provinceOptions":key="dict.id":label="dict.name":value="dict.id"/></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="市" prop="city"><el-selectv-model="Addressform.cityId"filterableplaceholder=""style="width: 100%"@change="changeCity"><el-optionv-for="dict in cityOptions":key="dict.id":label="dict.name":value="dict.id"/></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="区" prop="region"><el-selectv-model="Addressform.regionId"placeholder=""filterablestyle="width: 100%"@change="changeRegion"><el-optionv-for="dict in regionOptions":key="dict.id":label="dict.name":value="dict.id"/></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="乡(镇)" prop="street"><el-selectv-model="Addressform.streetId"placeholder=""filterablestyle="width: 100%"@change="changeStreet"><el-optionv-for="dict in streetOptions":key="dict.id":label="dict.name":value="dict.id"/></el-select></el-form-item></el-col></el-row><el-row style="display: flex; align-items: end"><el-col :span="20"><el-form-item label="村" prop="village"><el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4 }"placeholder="请输入村"v-model="Addressform.village"></el-input></el-form-item></el-col><el-col :span="4"><el-form-item label="" label-width="20px"><el-buttontype="primary"icon="el-icon-search"size="mini"@click="searchAddress":disabled="!Addressform.streetId">搜索</el-button></el-form-item></el-col></el-row></el-form><div id="mapselectpoint-container"></div><span slot="footer" class="dialog-footer"><el-button @click="MapVisible = false">取 消</el-button><el-buttontype="primary"@click="submitAddress":disabled="!point || !Addressform.streetId">确 定</el-button></span></el-dialog>
</template><script>
import axios from "axios";
import {selectAreaByParentCode,addFarmerAddress,getFarmerAddressInfo,updateFarmerAddressInfo,
} from "@/api/business/farmerInfo";
export default {name: "homepage",props: {farmerId: {type: String,default: "",},},data() {return {MapVisible: false,icon: {// 图标类型,现阶段只支持 image 类型type: "image",// 图片 urlimage:"https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png",// 图片尺寸size: [64, 30],// 图片相对 position 的锚点,默认为 bottom-centeranchor: "center",},textStyle: {fontSize: 12,fontWeight: "normal",fillColor: "#22886f",strokeColor: "#fff",strokeWidth: 2,fold: true,padding: "2, 5",},map: null,marker: null,// 表单信息Addressform: {provinceId: undefined,province: undefined,city: undefined,cityId: undefined,region: undefined,regionId: undefined,street: undefined,streetId: undefined,village: undefined,},Addressrules: {province: [{required: true,message: "省不能为空",trigger: "change",},],city: [{required: true,message: "市不能为空",trigger: "change",},],region: [{required: true,message: "区不能为空",trigger: "change",},],street: [{required: true,message: "镇不能为空",trigger: "change",},],village: [{required: true,message: "村不能为空",trigger: "blur",},],},provinceOptions: [],cityOptions: [],regionOptions: [],streetOptions: [],//   图上点位point: null,};},mounted() {},methods: {initMap(id) {// 新增点位this.MapVisible = true;this.$nextTick(async function () {// 重置信息this.reset();// 获取省级下拉内容if (!id) {// 如果是新增let res = await selectAreaByParentCode({ parentId: 1 });this.provinceOptions = res.data;}// 地图初始化this.map = new AMap.Map("mapselectpoint-container", {zoom: 15.8,//   center: [116.469881, 39.993599], //不设置自动定位到当前所在城市});this.map.setMapStyle("amap://styles/xxxxxxxxxxxxxxxxxxxx"); //设置地图的显示样式// 给地图绑定一个点击事件this.map.on("click", this.showInfoClick); //地图点击事件if (id) {// 如果是修改//   回显地址// 地址详情查询+回显getFarmerAddressInfo(id).then((res) => {this.Addressform = res.data;// 获取省市区镇下拉数据selectAreaByParentCode({ parentId: 1 }).then((res) => {// 省this.provinceOptions = res.data;});selectAreaByParentCode({parentId: this.Addressform.provinceId,}).then((res) => {// 市this.cityOptions = res.data;});selectAreaByParentCode({ parentId: this.Addressform.cityId }).then((res) => {// 区this.regionOptions = res.data;});selectAreaByParentCode({parentId: this.Addressform.regionId,}).then((res) => {// 镇this.streetOptions = res.data;});// 地址回显之后,给地图打点this.setPoint([this.Addressform.longitude,this.Addressform.latitude,]);this.map.setZoomAndCenter(18, [this.Addressform.longitude,this.Addressform.latitude,]);});}});},reset() {this.point = null;this.cityOptions = [];this.regionOptions = [];this.streetOptions = [];this.Addressform = {provinceId: undefined,province: undefined,city: undefined,cityId: undefined,region: undefined,regionId: undefined,street: undefined,streetId: undefined,village: undefined,};this.resetForm("Addressform");},setPoint(point) {//    保存点位,如果点位存在则可以提交地址this.point = point;// 添加一个点位if (this.marker) {this.map.remove(this.marker);}this.marker = new AMap.Marker({icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: point,offset: new AMap.Pixel(-13, -30),});this.marker.setMap(this.map);},showInfoClick(e) {// 点击地图,在地图上打个标记this.setPoint([e.lnglat.getLng(), e.lnglat.getLat()]);// 通过点位获取省市区信息并回显this.regeoCode([e.lnglat.getLng(), e.lnglat.getLat()]);},async regeoCode(point) {// 获取标记位置信息:省市区镇用于保存信息let res = await axios(`https://restapi.amap.com/v3/geocode/regeo?location=${point.join(",")}&key=f4d2e724f0ba6fe3b1cb5f841bce7a5e`);if (!res.data.regeocode.formatted_address ||res.data.regeocode.formatted_address.length == 0) {// 如果点的位置不在国内,重置地图// 清空省市区this.cityOptions = [];this.regionOptions = [];this.streetOptions = [];this.Addressform = {provinceId: undefined,province: undefined,city: undefined,cityId: undefined,region: undefined,regionId: undefined,street: undefined,streetId: undefined,village: undefined,};this.resetForm("Addressform");return;}let { province, city, district, township } =res.data.regeocode.addressComponent;// 在这里为了回显,加一些判断方法if (province == "北京市") {city = "北京城区";} else if (province == "上海市") {city = "上海城区";} else if (province == "天津市") {city = "天津城区";} else if (province == "重庆市") {if (district.indexOf("区") > -1) {city = "重庆城区";} else {city = "重庆郊县";}}this.map.setZoomAndCenter(15.8, point);// 逐级回填省市区镇// 回填省this.provinceOptions.forEach((item) => {if (item.name == province) {this.Addressform.provinceId = item.id;this.Addressform.province = item.name;}});// 回填市 (先获取市的下拉列表)let res2 = await selectAreaByParentCode({parentId: this.Addressform.provinceId,});this.cityOptions = res2.data;this.cityOptions.forEach((item) => {if (item.name == city) {this.Addressform.cityId = item.id;this.Addressform.city = item.name;}});// 回填区/(先获取区/县的下拉列表)let res3 = await selectAreaByParentCode({parentId: this.Addressform.cityId,});this.regionOptions = res3.data;this.regionOptions.forEach((item) => {if (item.name == district) {this.Addressform.regionId = item.id;this.Addressform.region = item.name;}});// 回填镇(先获取镇的下拉列表)let res4 = await selectAreaByParentCode({parentId: this.Addressform.regionId,});this.streetOptions = res4.data;this.streetOptions.forEach((item) => {if (item.name == township) {this.Addressform.streetId = item.id;this.Addressform.street = item.name;}});// 回填详细信息this.Addressform.village =res.data.regeocode.formatted_address.split(township)[res.data.regeocode.formatted_address.split(township).length - 1];},async regeoAddress(address, zoom) {// 获取标记位置信息:省市区镇用于保存信息await axios(`https://restapi.amap.com/v3/geocode/geo?address=${address}&key=f4d2e724f0ba6fe3b1cb5f841bce7a5e`).then((res) => {this.map.setZoomAndCenter(zoom,res.data.geocodes[0].location.split(","));// 给搜索的坐标打点吧 先清除原来的点this.setPoint(res.data.geocodes[0].location.split(","));});},async changeProvince(val) {this.provinceOptions.forEach((item) => {if (item.id == val) {this.Addressform.province = item.name;}});// 放大省位置await this.regeoAddress(this.Addressform.province, 5.5);// 清除市镇街道数据this.cityOptions = [];this.regionOptions = [];this.streetOptions = [];this.Addressform.cityId = undefined;this.Addressform.regionId = undefined;this.Addressform.streetId = undefined;this.Addressform.city = undefined;this.Addressform.region = undefined;this.Addressform.street = undefined;//  通过val获取子集市区let res = await selectAreaByParentCode({ parentId: val });this.cityOptions = res.data;},async changeCity(val) {this.cityOptions.forEach((item) => {if (item.id == val) {this.Addressform.city = item.name;}});await this.regeoAddress(this.Addressform.province + this.Addressform.city,8);// 镇街道数据this.regionOptions = [];this.streetOptions = [];this.Addressform.regionId = undefined;this.Addressform.streetId = undefined;this.Addressform.region = undefined;this.Addressform.street = undefined;//  通过val获取子集市区console.log(this.Addressform);let res = await selectAreaByParentCode({ parentId: val });this.regionOptions = res.data;},async changeRegion(val) {this.regionOptions.forEach((item) => {if (item.id == val) {this.Addressform.region = item.name;}});await this.regeoAddress(this.Addressform.province +this.Addressform.city +this.Addressform.region,10);// 镇街道数据this.streetOptions = [];this.Addressform.streetId = undefined;this.Addressform.street = undefined;//  通过val获取子集市区let res = await selectAreaByParentCode({ parentId: val });this.streetOptions = res.data;},async changeStreet(val) {this.streetOptions.forEach((item) => {if (item.id == val) {this.Addressform.street = item.name;}});await this.regeoAddress(this.Addressform.province +this.Addressform.city +this.Addressform.region +this.Addressform.street,12);},async searchAddress() {// 搜索具体位置 直接给打点await this.regeoAddress(this.Addressform.province +this.Addressform.city +this.Addressform.region +this.Addressform.street +this.Addressform.village,12);},submitAddress() {// 提交地址信息this.$refs["Addressform"].validate((valid) => {if (valid) {let address = {...this.Addressform,longitude: this.point[0],latitude: this.point[1],farmerId: this.farmerId,};console.log(address);if (!address.id) {addFarmerAddress(address).then((res) => {this.$modal.msgSuccess("新增成功");this.MapVisible = false;this.$emit("updateAddress", { id: this.farmerId });});} else {updateFarmerAddressInfo(address).then((res) => {this.$modal.msgSuccess("修改成功");this.MapVisible = false;this.$emit("updateAddress", { id: this.farmerId });});}}});},},
};
</script>
<style lang="scss" scoped>
::v-deep #mapselectpoint-container {width: 100%;height: 500px;.amap-icon img {width: 30px;height: 40px;}
}
</style>

四、自定义地图

  • 自定义地图
    在这里插入图片描述
  this.map = new AMap.Map("mapselectpoint-container", {zoom: 15.8,//   center: [116.469881, 39.993599], //不设置自动定位到当前所在城市mapStyle: "amap://styles/8c825bfe70db32d900edb766197db660", //设置地图的显示样式});//添加如下代码即可this.map.setMapStyle("amap://styles/你的自定义地图ID");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/349011.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流程设计的基本步骤

背景 公司为什么要流程&#xff0c;已经有专门章节进行阐述&#xff1b; 什么是流程&#xff0c;已经有专门章节进行专门阐述&#xff1b; 那么接下来这个章节讨论&#xff0c;流程设计的基本步骤&#xff0c;那么谁来设计流程呢&#xff0c;让一个部门的员工来设计一份流程…

【RabbitMQ】RabbitMQ配置与交换机学习

文章目录 简介安装和部署1. 安装RabbitMQ2.创建virtual-host3. 添加依赖4.修改配置文件 WorkQueues模型1.编写消息发送测试类2.编写消息接收&#xff08;监听&#xff09;类3. 实现能者多劳 交换机Fanout交换机1.消息发送2.消息监听 Direct交换机1.消息发送2.消息接收 Topic交换…

vue3 vant4 仿京东分类功能实现

Ⅰ- 壹 - 功能展示和使用需求 需求描述 基于vant 实现,仿京东分类功能实现样式交互等基本实现,细节可能需要优化 地址 https://gitee.com/wswhq/vue3-vant-temp/tree/master/src/view/ClassIfication 功能展示 Ⅱ - 贰 - 封装思路 不表述了自己看代码吧 Ⅲ - 叁 - 使用 …

梯度下降法、牛顿法、条件熵

梯度下降法、牛顿法&#xff08;可见南瓜书&#xff09; 梯度下降法 深度学习&#xff1a;梯度下降法数学表示式的详细推导 牛顿法 条件熵 在李航老师的书中&#xff0c;第六章最大熵模型这里有个条件熵的定义&#xff1a; 推导如下&#xff1a; 其他一些事实&#xff1a;…

Vue22-v-model收集表单数据

一、效果图 二、代码 2-1、HTML代码 2-2、vue代码 1、v-model单选框的收集信息 v-model&#xff1a;默认收集的就是元素中的value值。 单选框添加默认值&#xff1a; 2、v-model多选框的收集信息 ①、多个选择的多选 注意&#xff1a; 此处的hobby要是数组&#xff01;&…

springboot 整合redis问题,缓存击穿,穿透,雪崩,分布式锁

boot整合redis 压力测试出现失败 解决方案 排除lettuce 使用jedis <!-- 引入redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclus…

【电子信息工程专业课】学习记录

数字信号处理 离散时间信号与系统 周期延拓 一个连续时间信号经过理想采样后&#xff0c;其频谱将沿着频率轴以采样频率Ωs 2π / T 为间隔而重复。 混频 各周期的延拓分量产生频谱交替的现象 奈奎斯特采样定理 fs > 2fh Z变换 收敛域&#xff1a;使任意给定序列x(n)的Z变…

Sqoop学习详细介绍!!

一、Sqoop介绍 Sqoop是一款开源的工具&#xff0c;主要用于在Hadoop(HDFS/Hive/HBase)与传统的数据库(mysql、postgresql...)间进行数据的传递&#xff0c;可以将一个关系型数据库&#xff08;例如 &#xff1a; MySQL ,Oracle ,Postgres等&#xff09;中的数据导进到Hadoop的H…

2024年金融、贸易与创意产业国际会议(ICFTCI 2024)

2024 International Conference on Financial Trade and Creative Industries 【1】大会信息 会议简称&#xff1a;ICFTCI 2024 大会地点&#xff1a;中国西安 投稿邮箱&#xff1a;icftcisub-paper.com 【2】会议简介 2024年金融贸易与创意产业国际会议即将召开&#xff…

【Python】已完美解决:executemany() takes exactly 2 positional arguments (3 given)

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例&#xff08;结合实战场景&#xff09;五、注意事项 已解决&#xff1a;Python中executemany()方法参数数量错误的问题 一、问题背景 在Python的数据库编程中&#xff0c;executemany()方法是一个常…

loading组件封装原理

以vue3为例&#xff0c;采用ts 的语言 首先可对所需数据定义在接口中 interface Prop{ //核心所需的就是 lading:boolean ,type: lading | skeleton} 进行调用 封装的话采用的是插槽 <div v-if"loading" ><slot name"template"><…

随手记:uniapp图片展示,剩余的堆叠

UI效果图&#xff1a; 实现思路&#xff1a; 循环图片数组&#xff0c;只展示几张宽度就为几张图片边距的宽度&#xff0c;剩下的图片直接堆叠展示 点击预览的时候传入当前的下标&#xff0c;如果是点击堆叠的话&#xff0c;下标从堆叠数量开始计算 <template><…

私有云和多云管理平台 | Cloudpods v3.11.4 正式发布

本次 3.11.4 更新亮点为&#xff1a;系统镜像引入社区镜像&#xff0c;用户可以一键导入各主流开源操作系统镜像&#xff0c;方便用户上手使用。持续迭代共享 LVM&#xff0c;支持快照&#xff0c;主备机等特性&#xff0c;修复迁移删除镜像缓存等 BUG。 功能优化 【费用】费…

Vue25-内置指令02:v-text指令

一、v-html对比v-text v-html支持结构的解析&#xff0c;v-text不支持结构的解析。 二、v-html的安全性问题 2-1、cookie的原理&#xff08;node.js&#xff09; 7天免登录&#xff0c;cookie实现。 cookie的本质就是类似于json的字符串&#xff0c;格式是&#xff1a;key-va…

数据安全:Web3时代的隐私保护新标准

随着数字化时代的到来&#xff0c;我们的生活已经完全依赖于互联网和数据交换。然而&#xff0c;随之而来的是对个人隐私和数据安全的日益关注。在这个信息爆炸的时代&#xff0c;数据泄露、个人隐私侵犯和网络攻击等问题日益突出&#xff0c;而Web3技术的崛起正带来了一种全新…

【AI】文心一言的使用分享

在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展正在改变我们的生活。文心一言&#xff0c;作为这一浪潮中的佼佼者&#xff0c;以其卓越的自然语言处理能力和广泛的应用场景&#xff0c;给我带来了前所未有的使用体验。在这篇分享中&#xff0c;我…

Sui Bridge在测试网上线并推出10万SUI激励计划

是一种为Sui设计的原生桥接协议&#xff0c;专门用于在Sui与其他网络之间桥接资产和数据。今天&#xff0c;Sui Bridge宣布在测试网上线。作为一种原生协议&#xff0c;Sui Bridge能够在Ethereum和Sui之间轻松且安全地转移ETH、wBTC、USDC和USDT&#xff0c;使其成为Sui基础设施…

基于 Python 解析 XML 文件并将数据存储到 MongoDB 数据库

1. 问题背景 在软件开发中&#xff0c;我们经常需要处理各种格式的数据。XML 是一种常用的数据交换格式&#xff0c;它可以存储和传输结构化数据。很多网站会提供 XML 格式的数据接口&#xff0c;以便其他系统可以方便地获取数据。 我们有这样一个需求&#xff1a;我们需要从…

GIGE 协议摘录 —— 照相机的标准特征列表(五)

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 —— 设备发现&#xff08;一&#xff09; GIGE 协议摘录 —— GVCP 协议&#xff08;二&#xff09; GIGE 协议摘录 —— GVSP 协议&#xff08;三&#xff09; GIGE 协议摘录 —— 引导寄存器&#xff08;四&#xff09; GIGE 协议…

D 25章 进程的终止

D 25章 进程的终止 440 25.1 进程的终止&#xff1a;_exit()和exit() 440 1. _exit(int status)&#xff0c; status 定义了终止状态&#xff0c;父进程可调用 wait 获取。仅低8位可用&#xff0c; 调用 _exit() 总是成功的。 2.程序一般不会调用 _exit()&#xff0c; 而是…