Vue通过经纬度显示点位地图

效果图

1.首先运行npm install --save @amap/amap-vue
下载资源在main.js里添加配置

// 高德地图
import AmapVue from '@amap/amap-vue';AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = 'e1b6e4516f3e515c017ea2e7356f7eab';
AmapVue.config.plugins = ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch', 'AMap.CircleMarker', 'AMap.Polyline'
];
Vue.use(AmapVue);
window._AMapSecurityConfig = {securityJsCode:'11a114159073d6bd17eddddbadce94d9',
};

2.在vue页面添加代码

<template><div><table><af-table-column label="所在地址" align="center" prop="szdz" ><template slot-scope="scope"><el-link type="primary"               @click="clickMapInfo(scope.row.jd,scope.row.wd)" :underline="false"><span>{{scope.row.szdz}}</span></el-link></template></af-table-column>  </table><el-dialog title="查看工地地址" :visible.sync="showMapInfo" width="65%" append-to-body><look-map-info :timeStamp="Date.parse(new Date())" :mapData="mapInfo" /></el-dialog></div>
</template><script>import lookMapInfo from "@/components/AMap/lookMapInfo.vue";export default {components: {lookMapInfo},data() {return {// 经纬度信息mapInfo: "",// 是否查看信息地图showMapInfo: false,}}methods: {// 点击查看地图位置clickMapInfo(jd,wd) {if (!jd) {this.$message.error("请维护地址信息");return;}this.mapInfo = jd + "," + wd;this.showMapInfo = true;},}}
</script>

3.添加地图页面

<template><div class="coord-picker"><div class="map-container"><amapcache-key="coord-picker-map"mmap-style="amap://styles/whitesmoke"async:center.sync="center":zoom.sync="zoom"is-hotspot><amap-marker v-if="position" :position.sync="position" draggable /></amap></div></div>
</template><script>
export default {props: {timeStamp: {type: Number,},mapData: {type: String,},},data() {return {center: null,zoom: 10,position: null,};},watch: {timeStamp() {this.center = [115.479646, 35.234309];this.zoom = 10;this.position = null;this.initMap();},mapData() {this.initMap();},},created() {this.initMap();},methods: {// 搜索输入地区信息async initMap() {if (!this.mapData) {return;}let mapPoi = this.mapData.split(",");if (mapPoi.length < 2) {this.center = [115.479646, 35.234309];this.zoom = 10;return;}this.center = mapPoi;this.zoom = 14;this.position = mapPoi;},},
};
</script><style lang="scss" scoped>
.map-container {width: 100%;height: 500px;
}
</style>

Vue通过经纬度显示点位地图相关推荐

vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息
文章目录 1.写在前面 2. 地图点击事件singleclick 2.1 点击获取经纬度,调用创建mark要素的方法 2.2 实现根据经纬度创建mark要素,设置mark样式,添加到图层,创建要素标题 ...
百度地图多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置自动缩放等级
如果有多个兴趣点(经纬度.坐标点)需要同时显示在地图上,如何设置缩放比例.如果缩放太细,那么一个屏幕放不下,如果缩放太粗,显示就太密集.需要在程序中根据点的分布来设置. 百度地图Android SDK ...
（百度地图）输入地址显示经纬度并且在地图上显示具体位置
输入地址显示经纬度并且在地图上显示具体位置博主比较懒,不过多描述,直接上代码,通俗易懂,哈哈哈哈哈哈引入百度地图<script type="text/javascript" ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】
是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...
vue+element中引入百度地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货谢谢您的支持! 1.首先你需要下载npm模 ...
使用matlab绘制世界地图并根据经纬度绘制点位(附m_map的下载与安装说明)
文章目录 1.worldmap & geoshow 2.m_map工具箱 3.根据经纬度在世界地图上绘制点位使用matlab绘制世界地图有两种方法(自己使用过的,可能有别的我不了解的方法): ...
openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解
文章目录 1. VectorLayer矢量图层的理解 2. openlayers通过坐标点画中国地图 2.1 准备边界的 data 数据 2.2 准备 china.json 的数据文件 2.3 实现区 ...

Vue通过经纬度显示点位地图

Vue通过经纬度显示点位地图相关推荐

最新文章

热门文章