使用高德地图 vue-amap 中遇到的问题

2023-11-12

1) 搜索组件进行搜索的时候,无论搜索哪个城市,地图一直固定在一个城市(我的是深圳)

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
</el-amap-search-box>
// 配置
searchOption: {
  city: '深圳',
  citylimit: true
},

找了半天问题 , 发现应该city值为全国的时候,就可以在输入不同城市的时候地图转换为不同的城市

searchOption: {
  city: '全国',
  citylimit: true
},

2) 点击地图显示相应的地址

events:{
    click: (e,f) => {
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });  
        _this.initData.longitude = e.lnglat.lng; // 经度
        _this.initData.latitude = e.lnglat.lat; // 纬度
        _this.center = [ e.lnglat.lng, e.lnglat.lat]; // 地图切换到该位置
        _this.circleList[0].center = [ e.lnglat.lng, e.lnglat.lat]; // 地图切换到该位置
        geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                   if (result && result.regeocode) {
                        _this.initData.province = result.regeocode.addressComponent.province; // 省
                        _this.initData.city = result.regeocode.addressComponent.city; // 市
                        _this.initData.county = result.regeocode.addressComponent.district; // 区 / 镇
                        _this.initData.address = result.regeocode.formattedAddress; // 具体地址
                        _this.$nextTick();
                    }
             }
        }); 
    }
},

3) 根据选择的 省 市 区 进行地图的联动显示
这里写图片描述
类似该地图下部左侧部分 省 选择 北京市 则地图应该相应的切换到北京市 类似这样的功能

/*
    @ function : 根据输入的地址获取经纬度 进行地图的联动显示
    @ param : data 选择的地址  深圳市宝安区
*/
changeLocation(data){
    var _this = this;
    var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
    });  
    geocoder.getLocation(data,function(status, result){
        if (status === 'complete' && result.info === 'OK') {
            if (result && result.geocodes) {
                _this.center = [result.geocodes[0].location.lng,result.geocodes[0].location.lat]; 
                _this.circleList[0].center = [result.geocodes[0].location.lng, result.geocodes[0].location.lat];
            }
        }
    });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用高德地图 vue-amap 中遇到的问题 的相关文章

随机推荐

  • OpenCv案例(四): 基于OpenCvSharp对图像轮廓提取与面积和周长计算

    1 需求 提取图像中物体的轮廓以及计算该面积和周长 2 详细代码如下 public static void GetOutline try region 加载图像 Mat src Cv2 ImRead srcImg bmp if src Em
  • python连接Oracle数据库代码

    import cx Oracle as oracle db oracle connect 用户名 密码 IP 端口号 SERVICE NAME db oracle connect admin password IP 1521 DataBas
  • 微信小程序把页面做成图片分享【原创】

    开发微信小程序的时候 经常要遇到如上图这样的 保存小程序二维码图片的分享功能 网上找了很多都没有具体的写法 于是自己看官方文档写了一个 分享一下 首先 需要在 wxml 中 创建一个 画板 canvas wxml
  • Matlab 绘制虚数和复数数据图

    Matlab 绘制虚数和复数数据图 在 Matlab 中 我们可以使用 plot 函数来绘制实数数据图 但是当数据包含虚部时 我们需要使用另一种方式来绘制 Matlab 中的虚数和复数数据可以用两种方式表示 一种是把虚数表示为 i 即 j
  • 6.3-训练DNN的技巧

    文章目录 一 新的激活函数 New activation function 1 1 校正线性单元 Rectified Linear Unit 1 2 Maxout 二 自适应学习率 Adaptive Learning Rate 2 1 Mo
  • 红帽子Linux6.5 X86_64 自动重启解决办法

    机器重启前的15分钟 都会有一个报错 usr sbin bmc watchdog fiid obj get present countdown value data not available redhat对此有说明https access
  • qt中的tableView中的排序

    一 第三列的排序方式 1 第3列是按照升序来排列 ui gt tableView gt sortByColumn 3 Qt AscendingOrder 第3列是按照升序来排列 ui gt tableView gt setSortingEn
  • 弱网测试—Network-Emulator-Toolkit

    弱网测试 属于健壮性测试 怎么样去做弱网测试呢 一 安装弱网测试工具 Network Emulator Toolkit 推荐一个工具 Network Emulator Toolkit 这个工具的作用主要是设置丢包率和延时 1 安装与卸载 下
  • 怎么使用Web3.js开发一个简单的Dapp

    通过这篇文章 我们将学习 Dapps 和 Web3js 的基础知识 让我们了解一下基本术语 区块链 去中心化应用程序 以太坊 智能合约 web3js 区块链 区块链是一个可审计且不可逆的数据库 其中数据只能添加 在区块链中 数据可以作为块添
  • elasticSearch详细教程

    一 Elasticsearch简介 Elasticsearch是使用Java编写的一种开源搜索引擎 它在内部使用Luence做索引与搜索 通过对Lucene的封装 提供了一套简单一致的RESTful API Elasticsearch也是一
  • 数据结构中Java实现KMP与BF算法对比

    public class KMPANDBF public int indexBfCount SeqString s SeqString t int begin int slen tlen i begin j 0 int count 0 sl
  • Scipy

    10 1 import numpy as np import scipy optimize as opt m 20 n 10 A np random normal loc 10 scale 3 size m n b np random no
  • 【C语言】#文件操作#有5个学生,每个学生有3门课程的成绩,从键盘输入以上数据(包括学号、姓名、3门课成绩),计算出平均成绩,将原有数据和计算出的平均分数存放在磁盘文件stud中。

    题目 1 有5个学生 每个学生有3门课程的成绩 从键盘输入以上数据 包括学号 姓名 3门课成绩 计算出平均成绩 将原有数据和计算出的平均分数存放在磁盘文件stud中 设5名学生的学号 姓名和3门课成绩如下 在向文件stud写入数据后 应检查
  • Python 正则表达式RE知识学习

    正则表达式 Regular Expression 是一种强大的文本模式匹配工具 常用于在字符串中查找 替换 分割等操作 在 Python 中 可以使用内置的 re 模块来操作正则表达式 ChatGPT编写 下面是一些需要掌握的正则表达式知识
  • 《大五人格心理学》读书笔记

    这本书介绍了一下职场中的大五人格 具有不同人格特质的人适合干不同的工作 了解自己的人格特质 有利于自己的职业规划 了解同事的人格特质 有利于合作 1 宜人性 宜人性的心声 这对他人有什么影响VS 这对我有什么价值 宜人性的子维度 同理心 经
  • Nginx实现404页面的几种方法

    Nginx实现404页面的几种方法 第一种 Nginx自己的错误页面 第二种 反向代理的错误页面 第三种 Nginx解析php代码的错误页面 第四种 指定一个url地址 第一种 Nginx自己的错误页面 Nginx访问一个静态的html 页
  • JAVA单元测试框架-12-java代码重复执行失败的测试用例

    在使用testng执行测试用例时候 都会遇到测试用例执行失败 怎么再次执行失败的测试用例呢 官网给出了java代码执行测试的案例 每次执行完用例后会在test output目录路径下保存执行失败的测试用例 可以再次执行失败的测试用例来达到重
  • QT实现中英文键盘

    使用Qt中实现中英文键盘 支持各种linux嵌入式设备 实现思路 需要一个中文字体库 将字体库加载到一个Hash容器 字母和拼音作为key值 对应的中文作为value值 核心代码 include UKeyBoard h include ui
  • CSDN-markdown编辑器

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题 有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表格 设定内容居中 居左 居右 Sma
  • 使用高德地图 vue-amap 中遇到的问题

    1 搜索组件进行搜索的时候 无论搜索哪个城市 地图一直固定在一个城市 我的是深圳