index.html
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=8692185c8954a7ed79ea5b6dabd7d8ba&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
a.vue

<el-input v-model="city" auto-complete="off" id="tipinput" @input='clear'></el-input>
<div class="map" style="width:1300px; height:500px">
  <div id="container" style="width:1300px; height:500px"></div>
</div>
  mounted() {
    this.maps();
  }
 
methods:{
clear() {
this.lng = ''
this.lat = ''
},
maps() {
//地图加载
let that = this;
this.map = new AMap.Map("container", {
resizeEnable: true,
zoom: 10
});
// 添加左上角缩放控件
AMap.plugin(["AMap.ToolBar"], function () {
that.map.addControl(new AMap.ToolBar());
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: this.map
}); //构造地点查询类
placeSearch.search(this.city1); //默认查询广州
AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
that.lat = e.poi.location.lat; //经度
that.lng = e.poi.location.lng; //纬度
that.selectAdree(); //经纬度转为中文,实时保持名称与经纬度一致
}
this.clickMap();
},
clickMap() {
// 点击地图获取经纬度与名称,并标点
let that = this;
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = this.map.on("click", function (e) {
that.lng = e.lnglat.getLng();
that.lat = e.lnglat.getLat();
that.selectAdree();
});
},
selectAdree() {
// 经纬度转为中文
let that = this;
var lnglatXY = [that.lng, that.lat]; //已知点坐标
regeocoder(); function regeocoder() {
//逆地理编码
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function (status, result) {
if (status === "complete" && result.info === "OK") {
geocoder_CallBack(result);
}
});
// 删除现有的点
if (that.marker) {
that.marker.setMap(null);
that.marker = null;
}
that.marker = new AMap.Marker({
//加点
map: that.map,
position: lnglatXY
});
that.map.setFitView();
} function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
that.city = address;
}
},
}

vue 高德地图的更多相关文章

  1. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  2. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  3. Vue 高德地图 路径规划 画点

    CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...

  4. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

  5. vue 高德地图使用 vue-amap

    此插件文档及使用还不错 https://elemefe.github.io/vue-amap/ <template> <div class="amap-page-conta ...

  6. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  7. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

  8. vue中使用vue-amap(高德地图)

    因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题. 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wula ...

  9. vue调用高德地图:vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...

随机推荐

  1. 前阿里P8架构师谈如何设计优秀的API

    随着大数据.公共平台等互联网技术的日益成熟,API接口的重要性日益凸显,从公司的角度来看,API可以算作是公司一笔巨大的资产,公共API可以捕获用户.为公司做出许多贡献.对于个人来说,只要你编程,你就 ...

  2. sql注入原理,利用与防护

    一.sql注入原理 注入攻击的本质就是把用户输入的数据当作代码来执行.所以注入攻击有两个必要条件 1.用户能够控制的输入. 2.原本程序要执行的代码,拼接了用户输入的数据. 二.sql注入分类 按照请 ...

  3. MySQL授权(用户权限)

    一.mysql查询与权限 (二)授权 用户管理: 设置用户密码 前期准备工作: 停止服务 将配置文件当中的skip-grant-tables删除掉 重启服务: 执行修改命令 查看用户状态(如果数据过多 ...

  4. 1.Hbase简介

    1. Hbase简介 1.1. 什么是hbase(面向列) HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模 结构化存储集群 ...

  5. Vue 将一个组件嵌入到另一个组件中

    https://github.com/JasmineQian/Vue_Sample App.vue是所有组件的 要嵌入到App.vue组件中, 在script处导入 import xxx  from ...

  6. js 同步 异步 宏任务 微任务 文章分享

    分享一篇 写的很好的 宏任务 微任务  同步异步的文章 文章原地址: https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScri ...

  7. JAVA遇见HTML——JSP篇(JSP内置对象上)

    action:表单交给哪个动作去处理 MIME类型: 浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档:因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的. 语法 ...

  8. 一致性Hash算法(转载)

    原文地址http://blog.csdn.net/caigen1988/article/details/7708806   consistent hashing 算法早在 1997 年就在论文 Con ...

  9. Python中的字典分组函数(groupby,itertools)

    from operator import itemgetter # itemgetter用来去dict中的key,省去了使用lambda函数 from itertools import groupby ...

  10. pandas处理json脱坑(二)--jsonError: Expecting ',' delimiter: line 1 column 2674

    Expecting ',' delimiter: line 1 column 2674 json_dict = json.loads(row[json_columns].replace("' ...