基于vue 2.0的H5页面中使用H5自带的定位，高德地图定位，搜索周边商户，覆盖物标记，定位到当前城市

news2024/11/27 21:06:39

基于vue的H5页面中使用高德地图定位，搜索周边商户，覆盖物标记

首先安装高德地图插件
npm i @amap/amap-jsapi-loader --save
地图承载容器
<template>
  <div id="container"></div>
</template>
地图容器样式
<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>
引入 JS API Loader ,并初始化地图，增加覆盖物标记marker
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import Qs from "qs";
export default {
  data() {
    return {
      map: null,
      marker: [],
      arr: [
        {
          name: "如意湖",
          icon: "https://img1.baidu.com/it/u=3590267805,2648573622&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          ip1: 113.73241336023165,
          ip2: 34.77923169201559,
        },
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var _this = this;
      AMapLoader.load({
        key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置
          });
          for (var i = 0; i < _this.arr.length; i++) {
            var content = `<div class='marker-wrap'><img  src='${_this.arr[i].icon}' /><div class='marker-txt'>${_this.arr[i].name}</div></div>`; //自定义覆盖物内容
            var markerItem = new AMap.Marker({
              position: [_this.arr[i].ip1, _this.arr[i].ip2], // 经纬度
              offset: new AMap.Pixel(-13, -20), //覆盖物偏移量
              content: content, //自定义内容
            });
            markerItem.on("click", _this.markerClick); //为覆盖物增加点击事件
            markerItem.setExtData({ deviceMarkId: _this.arr[i] }); //为覆盖物点击事件增加自定义参数
            _this.marker.push(markerItem); //在地图上渲染覆盖物
          }

          this.map.add(this.marker);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    markerClick(e) {
      var demo = e.target.getExtData();
      console.log("demo: ", demo);
    },
  },
};
</script>
高德地图实现定位，域名必须是https开头（官方要求，不然会定位失败），然后必须是手机开启定位才行，在电脑上无法定位成功，AMap.Geolocation
 initMap() {
      var _this = this;
      AMapLoader.load({
        key: "xxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            // center: [113.73072265943132, 34.77648371816693], //如果使用高德的定位，这个可以不用写，初始化地图中心点位置
          });
          const OPTIONS = {
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 3000,
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          };
          var geolocation = new AMap.Geolocation(OPTIONS);
          _this.map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, "complete", onComplete);
          AMap.event.addListener(geolocation, "error", onError);
          function onComplete(data) {
            console.log("data: ", data);
            // data是具体的定位信息
          }

          function onError(err) {
            console.log("err: ", err);
            // 定位出错
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
高德地图实现周边搜索，关键字搜索，检索不得超过80个字符，分页返回，每页最大值为25条，搜索结果截图如下
  search() {
      var params = {
        key: "xxx", //用户在高德地图官网申请Web服务API类型Key
        keywords: "丹尼斯|悦来悦喜", //需要被检索的地点文本信息。多个关键字用“|”分割，文本总长度不可超过80字符
        page_size: 25, //	当前分页展示的数据条数
        page_num: 1, //请求第几分页
        location: "113.73072265943132,34.77648371816693", //坐标之间不能有空格，否则会请求不成功，中心点坐标
        radius: 3000, //	搜索半径 ,取值范围:0-50000
        output: "json", //返回结果格式类型,
      };
      axios({
        url: "https://restapi.amap.com/v5/place/around?" + Qs.stringify(params),
        method: "get",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        console.log("res: ", res);
      });
    },
    initMap() {
      var _this = this;
      AMapLoader.load({
        key: "xx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          _this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置
          });
          _this.search();
        })
        .catch((e) => {
          console.log(e);
        });
    },

![在这里插入图片描述](https://img-blog.csdnimg.cn/512e7143440a434eb16e1a3cbd9b0dd6.png

高德地图实现定位城市及详细经纬度，geolocation.getCurrentPosition，geolocation.getCityInfo
initMap() {
      var that = this;
      AMapLoader.load({
        key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          that.map = new AMap.Map("container", {
            resizeEnable: true,
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 16, //初始化地图级别
            // center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置
          });
          const OPTIONS = {
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 3000,
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          };
          var geolocation = new AMap.Geolocation(OPTIONS);
          that.map.addControl(geolocation);
          geolocation.getCityInfo((status, result) => {
            if (status == "complete") {
               console.log(result)
              geolocation.getCurrentPosition((status1, result1) => {
                if (status1 == "complete") {
                 console.log(result1)
                } else {
                 console.log(result1)
                }
              });
            } else {
              console.log(result)
            }
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《QT从基础到进阶·三十四》qobject_cast动态强制转换

《QT从基础到进阶·三十四》qobject_cast动态强制转换

qobject_cast()对QObject类执行动态强制转换。 qobject_cast()函数的行为类似于标准c dynamic_cast()&#xff0c;但执行速度比dynamic_cast 更快&#xff0c;且不需要C的RTTI 的支持&#xff0c;但qobject_cast 仅适用于QObject 及其派生类。 如果对象的类型正确(在运行时确定…
阅读更多...
Git客户端(TortoiseGit)使用

Git客户端(TortoiseGit)使用

参考文章&#xff1a; https://www.cnblogs.com/xuwenjin/p/8573603.html 【精选】使用TortoiseGit工具进行开发&#xff08;连接远程仓库进行克隆、拉取、获取、提交、推送、新建/切换/合并分支、解决冲突&#xff09;_tortoisegit连接远程仓库-CSDN博客 tortoise git 拉取…
阅读更多...
网络运维Day18

网络运维Day18

文章目录 环境准备导入数据确认表导入成功练习用表解析表格结构设计 查询语句进阶什么是MySQL函数常用功能函数数学计算流程控制函数查询结果处理 连接查询(联表查询)表关系什么是连接查询连接查询分类笛卡尔积内连接(INNER)外连接 子查询什么是子查询子查询出现的位置子查询练…
阅读更多...
Element UI 偶发性图标乱码问题

Element UI 偶发性图标乱码问题

1. 问题如图所示 2. 原因&#xff1a;sass版本低 sass: 1.26.8 sass-loader: 8.0.2 3. 解决方法 (1) 提高sass版本 (2) 在vue.config.js中添加配置 css: {loaderOptions: {sass: {sassOptions: {outputStyle: expanded}}}},4. 遇到的问题 升级后打包&#xff0c;报错 Syntax…
阅读更多...
自动化网络图软件

自动化网络图软件

由于 IT 系统的发展、最近向混合劳动力的转变、不断变化的客户需求以及其他原因&#xff0c;网络监控变得更加复杂。IT 管理员需要毫不费力地可视化整个网络基础设施&#xff0c;通过获得对网络的可见性&#xff0c;可以轻松发现模式、主动排除故障、确保关键设备可用性等。 为…
阅读更多...
半平面求交 - 洛谷 - P3256 [JLOI2013] 赛车

半平面求交 - 洛谷 - P3256 [JLOI2013] 赛车

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 往期相关背景点击前往 题目大意 题目链接 https://www.luogu.com.cn/problem/P3194 有一场赛车比赛&#xff0c;每辆车有自己的起位置和速度&#xff0c;比赛时间无…
阅读更多...
现如今大数据的框架

现如今大数据的框架

阅读更多...
目标检测一 SSD代码复现

目标检测一 SSD代码复现

SSD 背景 这是一种 single stage 的检测模型&#xff0c;相比于R-CNN系列模型上要简单许多。其精度可以与Faster R-CNN相匹敌&#xff0c;而速度达到了惊人的59FPS&#xff0c;速度上完爆 Fster R-CNN。 速度快的根本原因在于移除了 region proposals 步骤以及后续的像素采样或…
阅读更多...
《持续交付：发布可靠软件的系统方法》- 读书笔记（十五）

《持续交付：发布可靠软件的系统方法》- 读书笔记（十五）

持续交付&#xff1a;发布可靠软件的系统方法&#xff08;十五&#xff09; 第 15 章 持续交付管理15.1 引言15.2 配置与发布管理成熟度模型15.3 项目生命周期15.3.1 识别阶段15.3.2 启动阶段15.3.3 初始阶段15.3.4 开发与发布15.3.5 运营阶段 15.4 风险管理流程15.4.1 风险管理…
阅读更多...
微星迫击炮b660m使用intel arc a750/770显卡功耗优化方法

微星迫击炮b660m使用intel arc a750/770显卡功耗优化方法

bios 优化： 1，开机后持续点击“delete”键直到进入微星bios。 2，点击右上角选择我们熟悉的中文。 3，点击Settings--->高级---> pcie/Pci子系统设置 4，Native PCIE Enable : Enabled Native Aspm：允许
阅读更多...
从零开始 通义千问大模型本地化到阿里云通义千问API调用

从零开始 通义千问大模型本地化到阿里云通义千问API调用

从零开始 通义千问大模型本地化到阿里云通义千问API调用 一、通义千问大模型介绍 何为“通义千问”&#xff1f; “通义千问大模型”是阿里云推出的一个超大规模的语言模型&#xff0c;具有强大的归纳和理解能力&#xff0c;可以处理各种自然语言处理任务&#xff0c;包括但…
阅读更多...
Xrdp+Cpolar实现远程访问Linux Kali桌面

Xrdp+Cpolar实现远程访问Linux Kali桌面

XrdpCpolar实现远程访问Linux Kali桌面 文章目录 XrdpCpolar实现远程访问Linux Kali桌面前言1. Kali 安装Xrdp2. 本地远程Kali桌面3. Kali 安装Cpolar 内网穿透4. 配置公网远程地址5. 公网远程Kali桌面连接6. 固定连接公网地址7. 固定地址连接测试 前言 Kali远程桌面的好处在于…
阅读更多...
ZYNQ_project:test_fifo_255X8

ZYNQ_project:test_fifo_255X8

首先&#xff0c;这个vivado的fifo和quartus有很大不同。 用BRAM来实现异步fifo。 vivado的fifo有复位&#xff0c;在时钟信号稳定后&#xff0c;复位至少三个时钟周期&#xff08;读写端口的慢时钟&#xff09;&#xff0c;复位完成后30个时钟周期后再进行写操作&#xff08…
阅读更多...
【UE5】物体沿样条线移动

【UE5】物体沿样条线移动

目录 效果 步骤 一、使用样条线创建路径 二、创建沿样条线路径移动的物体 三、定义可移动物体的生成器 效果 步骤 一、使用样条线创建路径 先创建一个Actor蓝图&#xff0c;这里命名为“BP_Line” 该蓝图中只需添加一个样条组件 将“BP_Line”拖入场景中 按住Alt鼠标左键…
阅读更多...
如何制定LinkedIn商进行品牌推广？

如何制定LinkedIn商进行品牌推广？

在网络上脱颖而出不是一件简单的事。不仅有比以往更多的平台、算法和内容类型&#xff0c;而且还有更多的企业在争夺注意力。据统计&#xff0c;每天有超过 270 万家公司在 LinkedIn 上发布信息。 策略很重要&#xff0c;尤其是在 LinkedIn 营销领域。下面将为你总结LinkedIn 营…
阅读更多...
Spring Cloud与Spring Cloud Alibaba怎么正确引入依赖版本

Spring Cloud与Spring Cloud Alibaba怎么正确引入依赖版本

一.Spring Cloud与Spring Cloud Alibaba与Springboot各版本的依赖关系 我们可以去springcloud alibaba的github仓库中的说明中查找到三个依赖版本的对应关系&#xff1a; 版本说明 alibaba/spring-cloud-alibaba Wiki GitHub 二.通过BOM对Spring Cloud与Spring Cloud Alib…
阅读更多...
三江城115m²3室2厅2卫，现代简约不单是居所更是对生活的向往。福州中宅装饰，福州装修

三江城115m²3室2厅2卫，现代简约不单是居所更是对生活的向往。福州中宅装饰，福州装修

【前言】 简洁有力&#xff0c;静默无声。 以简约精致的方式&#xff0c;展现现代都市生活&#xff1b; 经典不因潮流褪色&#xff0c;不为悦人只为悦己。 项目信息 项目名称 | 三江城 设计地址 | 福建福州 项目面积 | 115㎡ 项目户型 | 3室2厅 设计风格 | 现代简约 全…
阅读更多...
BananaPi BPI-M6（Raspberry Pi 5） Android 平板电脑镜像测试温度

BananaPi BPI-M6（Raspberry Pi 5） Android 平板电脑镜像测试温度

我已经在本文中介绍了 全新的Banana Pi BPI-M6&#xff0c;并讨论了其与Raspberry Pi 5的硬件特性比较。 然后我将 Android 平板电脑固件上传到 eMMC&#xff0c;从而使 Banana Pi 实际可用。一开始有点坎坷&#xff0c;但文章中有更多内容。 在另一台电脑上&#xff0c;一切都…
阅读更多...
ubuntu 20.04安装 Anaconda教程

ubuntu 20.04安装 Anaconda教程

在安装Anaconda之前需要先安装ros(防止跟conda冲突&#xff0c;先装ros)。提前安装好cuda 和cudnn。 本博客参考&#xff1a;ubuntu20.04配置ros noetic和cuda&#xff0c;cudnn&#xff0c;anaconda&#xff0c;pytorch深度学习的环境 安装完conda后&#xff0c;输入: pyth…
阅读更多...
在 HarmonyOS 上使用 ArkUI 实现计步器应用

在 HarmonyOS 上使用 ArkUI 实现计步器应用

介绍 本篇 Codelab 使用 ArkTS 语言实现计步器应用&#xff0c;应用主要包括计步传感器、定位服务和后台任务功能&#xff1a; 1. 通过订阅计步器传感器获取计步器数据&#xff0c;处理后显示。 2. 通过订阅位置服务获取位置数据&#xff0c;处理后显示。 3. 通过服务开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023