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.mzph.cn/news/852287.shtml

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

相关文章

node调试

vscode安装插件&#xff1a;JavaScript Debugger (Nightly) 点击后生成一个launch.json文件 打断点&#xff0c;并发送一个请求来执行代码到断点处 按右上的向下箭头&#xff0c;进入源码&#xff0c;进行查看&#xff0c;左边查看变量等值

IDEA创建简单web(servlet)项目(server为tomcat)

引言 鉴于网上很少有关于IDEA开发servlet项目的教程&#xff08;24版idea&#xff0c;并且servlet技术十分复古&#xff0c;很少有人用到&#xff0c;能够理解&#xff0c;该文章旨在为在校的学生提供一个参考&#xff0c;项目技术简单&#xff09;本人在此总结从头开始到项目…

哪个牌子的儿童护眼灯好?五款平价护眼台灯推荐

护眼台灯在近年来成为家长和长时间使用电子设备人群关注的家电/学生产品。对于家中有孩子或经常面对电子屏幕的人士来说&#xff0c;很多人可能已经对这类产品有所了解并进行了购买。然而&#xff0c;部分家长对护眼台灯的认识还不够深入&#xff0c;因此尚未为孩子选择一款合适…

无公网IP与服务器完成企业微信网页应用开发远程调试详细流程

文章目录 前言1. Windows安装Cpolar2. 创建Cpolar域名3. 创建企业微信应用4. 定义回调本地接口5. 回调和可信域名接口校验6. 设置固定Cpolar域名7. 使用固定域名校验 前言 本文主要介绍如何在企业微信开发者中心通过使用内网穿透工具提供的公网域名成功验证回调本地接口服务! …

postman教程-21-Newman运行集合生成测试报告

上一小节我们Postman Newman的安装方法&#xff0c;本小节我们讲解一下Postman Newman的具体使用方法。 使用Newman运行集合 1、导出Postman集合&#xff1a; 在Postman中&#xff0c;选择你想要运行的集合&#xff0c;然后点击“导出”按钮&#xff0c;选择导出为“Collect…

【CS.PL】Lua 编程之道: 控制结构 - 进度24%

3 初级阶段 —— 控制结构 文章目录 3 初级阶段 —— 控制结构3.1 条件语句&#xff1a;if、else、elseif3.2 循环语句&#xff1a;for、while、repeat-until3.2.1 输出所有的命令行参数3.2.2 while.lua3.2.3 repeat.lua及其作用域 &#x1f525;3.2.4 for.lua (For Statement)…

eclipse 老的s2sh(Struts2+Spring+Hibernate) 项目 用import导入直接导致死机(CPU100%)的解决

1、下载Apache Tomcat - Apache Tomcat 8 Software Downloads 图中是8.5.100的版本&#xff0c;下面的设置用的是另一个版本的&#xff0c;其实是一样。 2、先将Server配好&#xff0c;然后再进行导入操作。 2、选择jdk 当然&#xff0c;这里也可以直接“Download and instal…

ARM功耗管理框架之SCP

安全之安全(security)博客目录导读 目录 一、功耗管理框架中的SCP 二、SCP的示例 三、SCP固件 四、SCP启动流程 五、SCP的memory map 六、SCP与AP的通信 思考:功耗管理框架?SCP?PPU?LPI?之间的关系?如何配合? 一、功耗管理框架中的SCP 二、SCP的示例

【Python】中的X[:,0]、X[0,:]、X[:,:,0]、X[:,:,1]、X[:,m:n]、X[:,:,m:n]和X[: : -1]

Python中 x[m,n]是通过numpy库引用数组或矩阵中的某一段数据集的一种写法&#xff0c;m代表第m维&#xff0c;n代表m维中取第几段特征数据。 通常用法&#xff1a; x[:,n]或者x[n,:] X[:,0]表示对一个二维数组&#xff0c;取该二维数组第一维中的所有数据&#xff0c;第二维中…

跟着AI学AI_07张量、数组、矩阵

说明这三个概念不是一个范畴的东西&#xff0c;但是很容易混淆&#xff0c;因此放到一起进行说明。 张量&#xff08;Tensor&#xff09; 张量是一个多维数组的通用概念&#xff0c;用于表示具有任意维度的数值数据。在数学和计算机科学中&#xff0c;张量是广泛用于表示数据的…

震坤行坤合供应链荣获“2024 LOG低碳供应链物流-最具影响力品牌商”

震坤行坤合供应链荣获“2024 LOG低碳供应链物流-最具影响力品牌商” 近日&#xff0c;罗戈网在青岛举办了2024第三届低碳供应链&物流创新发展高峰论坛&#xff0c;此次峰会聚焦“物流碳中和&#xff0c;可持续供应链”这一核心议题&#xff0c;汇聚国内外双碳践行企业、低碳…

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; 而是…

公司面试题总结(五)

25.谈一谈箭头函数与普通函数的区别&#xff0c;箭头函数主要解决什么问题&#xff1f; 箭头函数与普通函数的区别&#xff1a; ⚫ 语法简洁性&#xff1a; ◼ 箭头函数使用>符号定义&#xff0c;省略了 function 关键字&#xff0c;使得语法更为紧凑。 ◼ 对于单行函…

【Linux系统编程】进程间通信

进程间通信 1.概念 进程间通信&#xff08;IPC&#xff0c;InterProcess Communication)是指在不同进程之间传播或交换信息。 优点&#xff1a; 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&…

机器学习笔记 - 用于3D数据分类、分割的Point Net简述

一、简述 在本文中,我们将了解Point Net,目前,处理图像数据的方法有很多。从传统的计算机视觉方法到使用卷积神经网络到Transformer方法,几乎任何 2D 图像应用都会有某种现有的方法。然而,当涉及到 3D 数据时,现成的工具和方法并不那么丰富。3D 空间中一个工具就是Point …

《转载》前苏联的三进制计算机Setun

1、苏联的三进制计算机概述 早在 1956 年&#xff0c;就需要创建一种可在大学和实验室中使用的实用数字计算机模型。为此&#xff0c;需要一种易于学习、可靠、廉价但同时高效、专为大规模使用而设计的小型计算机。 对这种机器的要求&#xff1a;运行速度必须等于每秒数百次操作…

力扣hot100: 48. 旋转图像

LeetCode&#xff1a;48. 旋转图像 受到力扣hot100&#xff1a;54. 螺旋矩阵的启发&#xff0c;我们可以对旋转图像按层旋转&#xff0c;我们只需要记录四个顶点&#xff0c;并且本题是一个方阵&#xff0c;四个顶点就能完成图像的旋转操作。 1、逐层旋转 注意到&#xff0…

Stable Diffusion 如何写出更优雅的 Prompt

在看了前面的课程后&#xff0c; 相信很多人都会有一个困惑&#xff0c;这个 prompt 咋写… 为什么我写的时候只能憋出来了一个 a girl, a boy, beautify … 再也想不到其他的了&#xff0c; 总感觉是吃了没文化的亏&#xff1f; 这一节课我们就来讲一讲 如何写好 prompt …

个股场外期权个人如何参与买卖?

个股场外期权作为一种金融衍生品&#xff0c;为个人投资者提供了多样化的投资选择和风险管理工具。想要参与个股场外期权的买卖&#xff0c;以下是一些关键步骤和考虑因素。 文章来源/&#xff1a;财智盈动 第一步&#xff1a;选择合适的金融机构 首先&#xff0c;个人投资者需…

vue/react/js 常用的原生获取当前页面的url网址的相关方法

目录 第一章 场景 第二章 总结 第一章 场景 最近实现需求时遇到这么一种情况&#xff1a; 本地url —— 线上url —— 需求&#xff1a;需要将token清除掉 注意事项&#xff1a;token不是#/后面的参数&#xff0c;说明并不是我们前端返回的&#xff0c;vue路由的方法使用不…