高德Map

使用

官网:JS API 结合Vue使用

npm i @amap/amap-jsapi-loader --saveimport AMapLoader from '@amap/amap-jsapi-loader';

marker的属性、事件、方法

https://lbs.amap.com/api/javascript-api-v2/documentation#marker

自定义marker

  1. 为创建的 Marker 指定自定义图标 URL
  2. 创建的 Marker 指定 Icon 实例
  3. 为创建的 Marker 指定自定义内容
const map = new AMap.Map('container',{zoom: 10,  //设置地图显示的缩放级别center: [116.397428, 39.90923],  //设置地图中心点坐标mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式viewMode: '2D'  //设置地图模式
});
// 创建 AMap.Icon 实例:
const icon = new AMap.Icon({size: new AMap.Size(40, 50),    // 图标尺寸image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量,适于雪碧图等imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});// 将 Icon 实例添加到 marker 上:
const marker = new AMap.Marker({position: new AMap.LngLat(116.405467, 39.907761),offset: new AMap.Pixel(-10, -10),icon: icon, // 添加 Icon 实例title: '北京',zoom: 13
});map.add(marker);
const content = '<div class="marker-route marker-marker-bus-from"></div>';const marker = new AMap.Marker({content: content,  // 自定义点标记覆盖物内容position:  [116.397428, 39.90923], // 基点位置offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});map.add(marker);

https://lbs.amap.com/api/javascript-api-v2/guide/amap-marker/custom-marker

信息窗体 InfoWindow

地图模糊搜索

https://lbs.amap.com/demo/javascript-api-v2/example/poi-search/search-after-enter-prompt
官网:

    //输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类auto.on("select", select);//注册监听,当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});

自己写一个:

// 输入提示
let autocomplete = new AMap.AutoComplete({input: document.getElementById('tipinput')
})/**** 提示的select事件:*/
autocomplete.on('select', (e) => {console.log('select-e:', e)// console.log(e.poi.location) // 获取选中的的地址的经纬度// placeSearch.search(e.poi.name)/**** 选择select下拉,跳转到具体位置:* 1.‘北京市’等字段选择的时候,没有经纬度,所以使用了setCity去跳转到某个城市* 2.详细地市搜索的时候,是有location信息的,可以直接使用setCenter方法*/if (e.poi.location) {this.map.setCenter(e.poi.location)} else {this.map.setCity(e.poi.name)}
})

地理编码(address-> 经纬度)和逆地理编码(经纬度->address)

https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/geocoding
https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/regeocoding

 var geocoder = new AMap.Geocoder({city: "010", //城市设为北京,默认:“全国”radius: 1000 //范围,默认:500});geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete'&&result.regeocode) {var address = result.regeocode.formattedAddress;document.getElementById('address').value = address;}else{log.error('根据经纬度查询地址失败')}});

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

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

相关文章

Motion 5 for Mac,释放创意,打造精彩视频特效!

Motion 5 for Mac是一款强大的视频后期特效处理软件&#xff0c;为Mac用户提供了无限的创意可能性。无论你是专业的影视制作人&#xff0c;还是想为个人视频添加独特特效的爱好者&#xff0c;Motion 5都能满足你的需求&#xff0c;让你的视频脱颖而出。 Motion 5提供了丰富多样…

【滑动窗口】将X减到0的最小操作数

将X减到0的最小操作数 1658. 将 x 减到 0 的最小操作数 - 力扣&#xff08;LeetCode&#xff09; 文章目录 将X减到0的最小操作数题目描述算法原理代码编写Java代码编写C代码编写 题目描述 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 num…

webGIS使用JS,高德API完成的智慧校园项目路径规划

代码实现&#xff1a; //通过geojson对象来管理覆盖物&#xff0c;显示点geojson.addOverlay(marker)//保存数据&#xff08;将geojson对象转换成标准的GeoJSON格式对象&#xff09;saveData(geojson.toGeoJSON())})//从localstroage中读取数据function getData(){if(!localSto…

【HarmonyOS开发】ArkTs编译为SO包的流程记录

1、创建一个Static Library的静态模块 2、编写我们的SO控件 2.1 编译配置 {"apiType": "stageMode","buildOption": {"artifactType": "obfuscation"},"targets": [{"name": "default",&qu…

【FISCO BCOS】二十、多机部署区块链

目录 一、准备环境 二、开始搭建 三、检查节点 1.检查节点进程

Linux:查看端口占用的进程

命令 netstat -tunlp可以从图中看到&#xff0c;端口被那个进程占用&#xff0c;对应进程的pid是多少。

dart语言多线程遇到的问题:Isolate.spawnUri(),在真机调试中无法生成隔离

报错原因 [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: IsolateSpawnException: Unable to spawn isolate: Unsupported isolate URI: 未处理的异常&#xff1a;IsolateSpawnException&#xff1a;无法生成隔离&#xff1a;不支持隔离 URI&…

基于eBPF实现监控ssh登陆功能

以下是一个基于eBPF监控SSH登录的程序的示例代码&#xff0c;使用Python编写&#xff1a; python import os import ctypes from bcc import BPF # eBPF程序 bpf_text """ #include <uapi/linux/ptrace.h> #include <linux/sched.h> struct ssh…

递归实例化导致的栈溢出问题【简直蠢得出奇】

问题描述 今天在练习数据库增删改查&#xff0c;体验三层架构思想时&#xff0c;随便写了点DAO层代码&#xff0c;但服务器运行时竟然爆出了栈溢出的问题&#xff0c;说实话&#xff0c;空指针问题我还能放着耐心去代码里找找问题&#xff0c;但这个栈溢出&#xff0c;我之前就…

Vue学习笔记-Vuex基本使用

基本使用 初始化数据、配置actions、mutations&#xff0c;操作文件/store/index.js //index.js文件用于创建Vuex中最为核心的store对象 import Vue from vue import Vuex from vuex Vue.use(Vuex) //actions对象用于响应组件中的动作,专门负责业务逻辑 const actions {//函数…

Jetson Nano部署YOLOv5与Tensorrtx加速

一、烧录镜像 1、Jetson Nano烧写系统镜像 Jetson Nano是一款形状、外接口类似于树莓派的嵌入式主板&#xff0c;搭载了四核Cortex-A57处理器&#xff0c;GPU则是拥有128个NVIDIA CUDA核心的NVIDIA Maxwell架构显卡&#xff0c;内存为4GB的LPDDR4&#xff0c;存储则为16GB eM…

Postgresql和mysql的区别探究

PostgreSQL和MySQL是两个流行的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;具有各自的特点和优点。虽然两种数据库都可以处理大量数据&#xff0c;但在不同情况下&#xff0c;会有一些区别。下面将着重介绍PostgreSQL和MySQL的区别&#xff0c;并附带案例说…

入侵redis之准备---VMware上面安装部署centos7镜像系统【详细含云盘镜像】

入侵redis之准备—VMware上面安装部署centos7镜像系统【详细含云盘镜像 其他文章&#xff1a; 入侵redis并实现反弹shell控制【实战一】 学习大概步骤如下 第一步:先学习怎么安装部署kail系统服务器 入侵redis之准备—VMware安装部署kail镜像服务器【详细包含云盘镜像】 第二…

linux审计功能及规则 (audit.rule)

linux审计功能&#xff08;audit log&#xff09;是什么 audit是Linux自带的一套审计功能&#xff0c;可以监控我们日常的一些操作&#xff0c;然后将这些操作记录在audit.log中&#xff0c;方便我们查看日志。 审计规则是什么 在 /etc/audit/rules.d/audit.rules文件中&…

计网Lesson6 - IP 地址分类管理

文章目录 1. I P IP IP 地址定义2. I P v 4 IPv4 IPv4 的表示方法2.1 I P v 4 IPv4 IPv4 的分类编址法2.2 I P v 4 IPv4 IPv4 的划分子网法2.2.1 如何划分子网2.2.2 如何确定子网的借位数2.2.3 总结2.2.4 题目练习 2.3 I P v 4 IPv4 IPv4 的无分类编址法 1. I P IP IP 地…

04.里氏替换原则(Liskov Substitution Principle)

暴论&#xff1a;一般的&#xff0c;如果一个富二代不想着证明自己&#xff0c;那么他一辈子都会衣食无忧。 一言 里氏替换原则想告诉我们在继承过程中会遇到什么问题&#xff0c;以及继承有哪些注意事项。 概述 这是流传较广的一个段子&#xff1a; “一个坐拥万贯家财的富二…

亚马逊云科技Aurora MySQL在复制性能提升上的不断优化和尝试

前言 Amazon Aurora是亚马逊云科技自研的云原生关系数据库&#xff0c;它在提供和开源数据库MySQL、PostgreSQL的完好兼容性同时&#xff0c;也能够提供和商业数据库媲美的性能和可用性。 Aurora的性能提升不仅包含应用读写吞吐量的提升&#xff0c;也包含复制延迟的降低。一个…

代码随想录算法训练营第38天| 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

JAVA代码编写 动态规划&#xff08;Dynamic Programming&#xff09; 一个问题可以划分为多个子问题&#xff0c;且子问题之间有关联&#xff0c;就可以使用动态规划。 动态规划问题步骤&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式…

栈顺序存储的实现(详解)

栈是一种数据结构&#xff0c;它具有后进先出&#xff08;LIFO&#xff09;的特性。栈可以用来存储一组元素&#xff0c;并且只能在栈顶进行插入和删除操作。栈的基本概念包括&#xff1a; 1. 入栈&#xff08;push&#xff09;&#xff1a;将元素添加到栈顶的操作。 2. 出栈&…

图片消除笔哪些软件有?这三款智能消除软件值得收藏

图片消除笔哪些软件有&#xff1f;日常在社交媒体上分享照片或制作海报&#xff0c;广告时&#xff0c;经常会遇到需要删除图片中多余的元素&#xff0c;比如水印、日期、人物等&#xff0c;以便更好的去将这些图片进行二次创作&#xff0c;那么有哪些软件有图片消除笔可以选择…