vue引入高德地图
一,下载
npm install vue-amap --save
二,main.js文件内引入
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
key: '你的key',// 高德的key
// 插件集合
plugin: [
'AMap.CircleEditor',// 圆形编辑器插件
"AMap.Geolocation", // 定位控件,用来获取和展示用户主机所在的经纬度位置
"AMap.Geocoder", // 地理编码与逆地理编码服务,用于地址描述与坐标间的相互转换
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.CitySearch",
],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
//高德的安全密钥
window._AMapSecurityConfig = {
securityJsCode:'你的安全密钥',
}
三,封装组件:aliMap.vue
<template>
<div>
<div>
<div style="border: 1px solid #cccccc">
<!-- //搜索框 -->
<el-amap-search-box
:search-option="searchOption"
:on-search-result="onSearchResult"
/>
<!-- 地图 -->
<el-amap
class="amap-box"
:zoom="amap.zoom"
:center="amap.center"
:plugin="amap.plugin"
:events="amap.events"
>
<!-- 当前位置图标 -->
<el-amap-marker
v-for="(marker, index) in amap.markers"
:key="'marker' + index"
:position="marker.position"
/>
<!-- 位置名称显示 -->
<el-amap-text
v-for="(marker, index) in amap.markers"
:key="'text' + index"
:text="marker.text"
:offset="marker.offset"
:position="marker.position"
/>
</el-amap>
</div>
</div>
</div>
</template>
<script>
//初始数据
function getFormData() {
return {
lat: "39.909186",
lon: "116.39746",
orgAddr: "天安门",
province: "",
city: "",
district: "",
};
} export default {
name: "Map",
data() {
const vm = this;
return {
// form对象
dataForm: getFormData(),
// 地图搜索对象
searchOption: {
city: "全国",
citylimit: true,
},
lng: 0,
lat: 0,
// 地图对象
amap: {
zoom: 16,
center: [116.319802, 39.98294],
events: {
// 点击获取地址的数据
click(e) {
const { lng, lat } = e.lnglat;
vm.dataForm.lon = lng;
vm.dataForm.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 100,
extensions: "all",
});
geocoder.getAddress([lng, lat], function (status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log("点击获取地址的数据", result);
vm.dataForm.orgAddr = result.regeocode.formattedAddress;
vm.dataForm.province = result.regeocode.addressComponent.province;
vm.dataForm.city = result.regeocode.addressComponent.city;
vm.dataForm.district = result.regeocode.addressComponent.district;
vm.dataForm.lat = lat ? lat.toString() : "";
vm.dataForm.lon = lng ? lng.toString() : "";
vm.amap.markers = [];
const obj = {
position: [lng, lat],
text: result.regeocode.formattedAddress,
offset: [0, 30],
};
vm.amap.markers.push(obj);
vm.sure();
}
}
});
vm.$nextTick();
},
}, plugin: [
{
// 定位
pName: "Geolocation",
events: {
init(o) {
// o是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
console.log("定位:", result);
if (result && result.position) {
// 设置经度
vm.lng = result.position.lng;
// 设置维度
vm.lat = result.position.lat;
// 设置坐标
vm.amap.center = [vm.lng, vm.lat];
let op = {
position: [vm.lng, vm.lat],
text: result.formattedAddress,
offset: [0, 30],
};
vm.amap.markers.push(op);
// 页面渲染好后
vm.$nextTick();
}
});
},
},
},
],
//
markers: [],
},
};
},
created() {},
methods: {
// 地图搜索回调
onSearchResult(pois) {
const vm = this;
vm.amap.markers = [];
let latSum = 0;
let lngSum = 0;
console.log("地图回调", pois);
if (pois.length > 0) {
pois.forEach((poi, index) => {
const { lng, lat } = poi;
if (index === 0) {
lngSum = lng;
latSum = lat;
const obj = {
position: [poi.lng, poi.lat],
text: poi.name,
offset: [0, 30],
};
vm.amap.markers.push(obj);
console.log("地图搜索回调", poi);
vm.dataForm.orgAddr = poi.name;
vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
}
});
vm.amap.center = [lngSum, latSum];
}
},
// 提交方法
sure() {
const vm = this;
this.$emit("updateLocation", vm.dataForm);
},
},
};
</script>
<style lang="scss" scoped>
.amap-box {
height: 44vh;
height: calc(100vh - 45px);
}
.el-vue-search-box-container {
// top: 45px;
width: 100% !important;
}
.search-box {
position: absolute;
z-index: 5;
width: 70%;
left: 13%;
top: 10px;
height: 30px;
} .search-box .el-input {
float: left;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 0 7px 7px 0;
outline: none;
position: relative;
} .search-box .el-button {
position: absolute;
right: 0;
top: 1px;
width: 20%;
background: #38a28a;
border-radius: 0 7px 7px 0;
border: none;
color: #fff;
outline: none;
} .tip-box {
text-align: center;
width: 100%;
position: absolute;
top: 35px;
padding: 10px 0;
background-color: #fff;
opacity: 0.8;
}
</style>
四,需要的页面引入组件
<template>
<div>
<Map ref="map" @updateLocation="updateLocation" />
</div>
</template> <script>
import Map from '@/components/aliMap.vue'
export default {
name: '',
props: {
},
components: {
Map
},
data () {
return { }
},
mounted() { },
methods: {
updateLocation(Addr) {
console.log('位置信息:',Addr)
}
},
}
</script> <style scoped lang='scss'> </style>
高德地图官网:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/quick-start
参考文档: https://blog.csdn.net/qq_42740797/article/details/124867192
vue引入高德地图的更多相关文章
- vue-cli2.X中引入高德地图,将其设为全局对象
平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...
- vue调用高德地图:vue-amap
前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- vue 里面引入高德地图
效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 解决Vue引入百度地图JSSDK:BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
随机推荐
- LeetCode - 数组遍历
1. 485. 最大连续 1 的个数 1.1 分析题意 首先:我们求的是连续的1的个数,所以我们不能也没必要对数组进行排序: 其次:只要求求出最大连续1的个数,并不要求具体的区间数目,所以我们只需要用 ...
- 2022.9.30 Java第四次课后总结
1.public class BoxAndUnbox { /** * @param args */ public static void main(String[] args) { int value ...
- C++面向对象编程之复合、委托和继承
1.复合,表示has a template <typename T> calss A{ protected: B<T> c; } 这里表示 A 里面有一个 B,A 可以调用 B ...
- Windows活动目录_初识
计算机组织形式 工作组(用户本地登录时构造SID进行权限分配): 域(统一身份验证与管理) 域注意事项 实体:域控.域用户.加入域的机子. 依赖的服务:netlogon服务 强制刷新组策略gpupda ...
- 齐博x1再来个抛砖引玉 内容页根据关键词调用相关内容 新功能哦!
昨天升级了一个隐藏的功能,今天就简单的做个说明怎么用,反正也不能浪费不是 那就用内容页面关键词读取相关内容为例吧. 前台是你模型中已经存在keywords字段 关键词支持 空格分割,号分割 那么就开 ...
- 微粒群算法PSO 01背包问题 python
import random import math import matplotlib.pyplot as plt import numpy as np import time def init(b_ ...
- DQL-聚合函数
DQL-聚合函数 SQL基本函数,聚合函数对一组值执行计算,并返回单个值,也被称为组函数. 聚合函数对一组值执行计算并返回单一的值.除 COUNT 以外,聚合函数忽略空值,如果COUNT函数的应用对象 ...
- Python基础之函数:1、函数的介绍及名称空间
目录 一.函数 1.什么是函数 2.函数的语法结构 3.函数的定义与调用 4.函数的分类 5.函数的返回值 6.函数的参数 二.函数参数 1.位置参数 2.默认参数 3.可变长参数 1.一个*号 2. ...
- Perl引用
引用就是C语言中的指针,perl引用是一个标量类型可以指向变量.数组.哈希表(也叫关联数组)甚至子程序,可以应用在程序的任何地方. 在变量前面加一个\就得到了这个变量的一个引用 #!usr/bin/p ...
- __init__、__all__
在python中 引用模块包的时候,要先进入此模块的__init__.py中畅游一遍,因此,我们多次需要一个语句的时候,就可以将这些语句写入到__init__.py中: 在使用*号的时候我们可以用__ ...