高德地图、使用vue-amap实现地图的点击地址和经纬度的转换并显示

❤ vue-amap安装和使用

基于 Vue 2.0 和高德地图
ElementUI

❤ 1.npm 安装

npm install vue-amap --save

CDN方式

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

❤ 2、main.js引入

○ 安装后在main.js中设置以下内容

import VueAMap from "vue-amap"; //导入
Vue.use(VueAMap); //使用
// 初始化vue-amap
VueAMap.initAMapApiLoader({key: "your key", // 你申请的高德地图的key plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],v: "1.4.15",uiVersion: "1.1"
});

❤3、写成组件mapps.vue

<template><div><div class="search-box"><el-input style="margin-bottom: 20px;"v-model="searchKey"type="search"id="search"placeholder="请输入详细地址"></el-input><!--<button @click="searchByHand">搜索</button>--><div class="tip-box" id="searchTip"></div></div><!--amap-manager： 地图管理对象vid：地图容器节点的IDzooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]center： 地图中心点坐标值plugin：地图使用的插件events： 事件--><div style="margin-bottom: 20px;"><span>您选择的地址有：{{addresscon}}</span></div><div class="amap-box"><el-amap:amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":center="center":events="events"><!-- 标记 --><el-amap-markerv-for="(marker, index) in markers":position="marker":key="index"></el-amap-marker></el-amap></div></div>
</template>
<script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {props: ["city", "value", "longitude", "latitude", "isEdit"],data() {let self = this;return {addresscon:'',address: null,searchKey: "",amapManager,markers: [],searchOption: {city: this.city ? this.city : "全国",citylimit: true},center: [121.329402, 31.228667],zoom: 13,lng: 0,lat: 0,loaded: false,events: {init() {lazyAMapApiLoaderInstance.load().then(() => {self.initSearch();});},// 点击获取地址的数据click(e) {// self.markers = [];let { lng, lat } = e.lnglat;self.lng = lng;self.lat = lat;self.center = [lng, lat];self.markers.push([lng, lat]);console.log(self.markers);// 这里通过高德 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) {self.address = result.regeocode.formattedAddress;self.addresscon=self.addresscon+result.regeocode.formattedAddress+'、';console.log(result.regeocode.formattedAddress);// this.addresscon=this.addresscon+'、'+result.regeocode.formattedAddress+'';self.searchKey = result.regeocode.formattedAddress;self.$emit("updateLocation", lng, lat, self.searchKey);self.$nextTick();}}});}},// 一些工具插件plugin: [{// 定位pName: "Geolocation",events: {init(o) {// o是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {if (self.isEdit) {// 设置经度self.lng = self.longitude;// 设置维度self.lat = self.latitude;// 设置坐标self.center = [self.longitude, self.latitude];self.markers.push([self.longitude, self.latitude]);} else {// 设置经度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();}});}}}]};},created() {if (this.value) {this.searchKey = this.value;this.address = this.value;}if (this.longitude && this.latitude) {this.lng = this.longitude;this.lat = this.latitude;this.center = [this.longitude, this.latitude];this.markers.push([this.longitude, this.latitude]);}},methods: {// 选择地址后自动定位到当前地址附近updateAddress(value, longitude, latitude) {this.searchKey = value;this.address = value;this.lng = longitude;this.lat = latitude;this.center = [longitude, latitude];this.markers.push([longitude, latitude]);},initSearch() {let vm = this;let map = this.amapManager.getMap();AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {let poiPicker = new PoiPicker({input: "search",placeSearchOptions: {map: map,pageSize: 10},suggestContainer: "searchTip",searchResultsContainer: "searchTip"});vm.poiPicker = poiPicker;// 监听poi选中信息poiPicker.on("poiPicked", function(poiResult) {let source = poiResult.source;let poi = poiResult.item;if (source !== "search") {poiPicker.searchByKeyword(poi.name);} else {poiPicker.clearSearchResults();vm.markers = [];let lng = poi.location.lng;let lat = poi.location.lat;let address = poi.name; // poi.cityname + poi.adname + poi.namevm.center = [lng, lat];vm.markers.push([lng, lat]);vm.lng = lng;vm.lat = lat;vm.address = address;vm.searchKey = address;vm.$emit("updateLocation", lng, lat, vm.searchKey);}});});},searchByHand() {if (this.searchKey !== "" && this.poiPicker) {this.poiPicker.searchByKeyword(this.searchKey);}}}
};
</script>
<style>.search-box {margin-top: 6px;width: 100%;}.search-box input {padding: 0 15px;width: 100%;height: 32px;line-height: 32px;color: #606266;border: 1px solid #dcdfe6;border-radius: 4px;}.search-box input:focus {border-color: #409eff;outline: 0;}.search-box input::-webkit-input-placeholder {color: #c0c4cc;}.tip-box {width: 100%;max-height:280px;position: absolute;top: 72px;z-index: 10000;overflow-y: auto;background-color: #fff;}.amap-ui-poi-picker-sugg,.amap_lib_placeSearch {border: 1px solid #eee;border-radius: 4px;}.amap-box {height: 200px;}
</style>

❤4、使用组件

import mapps from '@/components/Mapgather/mapps.vue'  // 地图经纬度转换2
components: {mapps},<mapps ref="mapps"></mapps>

高德地图、使用vue-amap实现地图的点击地址和经纬度的转换并显示相关推荐

技巧 | 在R语言中使用高德地图的API进行地理/逆地理编码（地址与经纬度的相互转换）...
高德地图和百度地图都提供了坐标拾取系统,通过坐标查询或坐标反查操作可以查询一个地址对应的经纬度或经纬度对应的地址名称.但是,手动查询的方式效率很低,也不能进行批量查询. 本篇就来介绍在R语言中调用高德 ...
android地图旋转监听,android百度地图：地图缩放、旋转、俯视角度以及屏幕像素与经纬度的转换Projection...
MapControlDemo.java 通过MapController设置缩放.旋转.俯视角度private void perfomZoom(){ EditText t = (EditText) fi ...
使用高德地图api批量将地址转换为经纬度
有时候需要将一些地址信息转换为经纬度信息,在echarts地图上展示,一下代码可以批量将地址转换为经纬度. 如果没有安装requests或openpyxl 使用: pip install reques ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...
Vue Echarts英文版地图——强大的高德地图
一.安装插件 npm install echarts --savenpm install echarts-extension-amap --save 二.引入使用在index.html中导入从高德地 ...
高德地图引入Vue添加POI搜索功能、marker点标记、通过经纬度逆编码过程
安装高德地图 npm i @amap/amap-jsapi-loader --save 引入 import AMapLoader from '@amap/amap-jsapi-loader'; *在组 ...
Fragment 增加高德地图的 com.amap.api.maps.SupportMapFragment
1> 在 Fragment 增加高德地图的 com.amap.api.maps.SupportMapFragment 直接通过在XML布局文件中添加 <fragment android:i ...
基于高德地图api,vue实现步行导航
vue代码 <template><div><van-nav-bartitle="导航"left-text="返回"left-arr ...

高德地图、使用vue-amap实现地图的点击地址和经纬度的转换并显示

高德地图、使用vue-amap实现地图的点击地址和经纬度的转换并显示

❤ vue-amap安装和使用

❤ 1.npm 安装

❤ 2、main.js引入

❤3、写成组件mapps.vue

❤4、使用组件

高德地图、使用vue-amap实现地图的点击地址和经纬度的转换并显示相关推荐

最新文章

热门文章