在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)

首先
注册登陆高德地图 https://lbs.amap.com/

划过头像里面有个应用管理点开
进入到应用管理打开我的应用

选择创建应用

然后按照要求填写内容，切记一定要选择web端(JS API),填写完后提交当前应用。

完了这么多只是为了获得key

然后
打开项目
npm install vue-amap --save
安装地图依赖

打开项目中的mian.js文件
将下面复制进去，并替换为你自己应用的key

import aMap from 'vue-amap'   // 这个引入的最好放在引入的vue上面
Vue.use(aMap)
aMap.initAMapApiLoader({key: '*******************************',  // 你的keyplugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],//应用功能项v: '1.4.4', //版本uiVersion: '1.0' //ui版本
})

新建一个demo组件

<template><div class="container"><div class="search-box"><inputv-model="searchKey"type="search"id="search"><button @click="searchByHand">搜索</button><button @click="submitAddress" style="margin-left: 2px">确认</button><div class="tip-box" id="searchTip"></div></div><el-amap class="amap-box":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":center="center":events="events"><!-- 标记 --><el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker></el-amap></div></template><style lang="scss" scoped>.container {width:100%;height: 500px;// position: relative;// left: 0;// top: 50%;// transform: translate3d(-50%, -50%, 0);// border: 1px solid #999;}.search-box {position: absolute;z-index: 5;width: 70%;left: 13%;top: 10px;height: 30px;}.search-box input {float: left;width: 59%;height: 100%;border: 1px solid #30ccc1;padding: 0 8px;outline: none;}.search-box button {float: left;width: 20%;height: 100%;background: #30ccc1;border: 1px solid #30ccc1;color: #fff;outline: none;}.tip-box {width: 100%;max-height: 260px;position: absolute;top: 30px;overflow-y: auto;background-color: #fff;}
</style><script>import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'let amapManager = new AMapManager()export default {data() {let self = thisreturn {address: null,searchKey: '',amapManager,markers: [],searchOption: {city: '全国',citylimit: true},center: [121.329402, 31.228667],zoom: 17,lng: 0,lat: 0,loaded: false,markerEvent:{click(e){console.log(e);}},events: {init() {lazyAMapApiLoaderInstance.load().then(() => {self.initSearch()})},// 点击获取地址的数据click(e) {self.markers = []let {lng, lat} = e.lnglatself.lng = lngself.lat = latself.center = [lng, lat]self.markers.push([lng, lat])// 这里通过高德 SDK 完成。let geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})geocoder.getAddress([lng, lat], function (status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {console.log(result.regeocode.formattedAddress)self.address = result.regeocode.formattedAddressself.searchKey = result.regeocode.formattedAddressself.$nextTick()}}})}},// 一些工具插件plugin: [{// 定位pName: 'Geolocation',events: {init(o) {// o是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {// 设置经度self.lng = result.position.lng// 设置维度self.lat = result.position.lat// 设置坐标self.center = [self.lng, self.lat]self.markers.push([self.lng, self.lat])// loadself.loaded = true// 页面渲染好后self.$nextTick()}})},click(e){console.log(e);}}},{// 工具栏pName: 'ToolBar',events: {init(instance) {console.log(instance);}}},{// 鹰眼pName: 'OverView',events: {init(instance) {console.log(instance);}}},{// 地图类型pName: 'MapType',defaultType: 0,events: {init(instance) {console.log(instance);}}},{// 搜索pName: 'PlaceSearch',events: {init(instance) {console.log(instance)}}}]}},methods: {submitAddress(){consoel.log('经纬度',this.center)consoel.log('地址',this.address)},initSearch() {let vm = thislet map = this.amapManager.getMap()AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {var poiPicker = new PoiPicker({input: 'search',placeSearchOptions: {map: map,pageSize: 10},suggestContainer: 'searchTip',searchResultsContainer: 'searchTip'})vm.poiPicker = poiPicker// 监听poi选中信息poiPicker.on('poiPicked', function (poiResult) {// console.log(poiResult)let source = poiResult.sourcelet poi = poiResult.itemif (source !== 'search') {poiPicker.searchByKeyword(poi.name)} else {poiPicker.clearSearchResults()vm.markers = []let lng = poi.location.lnglet lat = poi.location.latlet address = poi.cityname + poi.adname + poi.namevm.center = [lng, lat]console.log(vm.center)vm.markers.push([lng, lat])vm.lng = lngvm.lat = latvm.address = addressvm.searchKey = address}})})},searchByHand() {if (this.searchKey !== '') {this.poiPicker.searchByKeyword(this.searchKey)}}}}</script>

用户可以直接获取当前位置信息以及通过搜索选中地址,点击地图,获取经纬度与地址信息,点击确认按钮可操作传递你的经纬度与地址(包括放大缩小卫星路况路网) 对了里面有element-ui组件可以配置一下也可自行改变(样式依旧自己写)

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)相关推荐

vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)相关推荐

最新文章

热门文章