vue集成高德地图
vue集成高德地图
前言
之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~
二、使用步骤
1.注册高德开发平台
来一发传送门,地址:https://amap.com/
首先得取高德开发平台注册个账号,然后去控制台创建应用如下图:
创建的时候选择web端,如上图的第一条记录(第二条记录不用管~)
2.vue
编写组件之前,先安装一下,执行下面命令:
npm install vue-amap --save
下一步在main.js引入,把自己的高德应用的key填上去,代码如下:
//引入高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '你的高德应用的key',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
v: '1.4.4',
uiVersion: '1.0'
})
下一步编写vue组件 AMap.vue,完整代码如下(注释了代码的不用管):
<template lang="html">
<div style="width:100%;height:800px;">
<div class="container">
<div class="search-box">
<input
v-model="searchKey"
type="search"
id="search">
<button @click="searchByHand">搜索</button>
<div class="tip-box" id="searchTip"></div>
</div>
<!--
amap-manager: 地图管理对象
vid:地图容器节点的ID
zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
center: 地图中心点坐标值
plugin:地图使用的插件
events: 事件
-->
<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>
</div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
let amapManager = new AMapManager()
export default {
name:'AMap',
data() {
let self = this
return {
address: null,
searchKey: '',
amapManager,
markers: [],
searchOption: {
city: '全国',
citylimit: true
},
center: [112.938888,28.228272],
zoom: 17,
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])
// 这里通过高德 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.formattedAddress
self.searchKey = result.regeocode.formattedAddress
self.$nextTick()
}
}
})
}
},
// 一些工具插件
plugin: [
{
pName: 'Geocoder',
events: {
init (o) {
//console.log("一些工具插件--地址"+o.getAddress())
}
}
},
{
// 定位
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])
// load
self.loaded = true
// 页面渲染好后
self.$nextTick()
}
})
}
}
},
{
// 工具栏
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: {
initSearch() {
let vm = this
let 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.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.cityname + poi.adname + poi.name
vm.center = [lng, lat]
vm.markers.push([lng, lat])
vm.lng = lng
vm.lat = lat
vm.address = address
vm.searchKey = address
}
})
})
},
searchByHand() {
if (this.searchKey !== '') {
this.poiPicker.searchByKeyword(this.searchKey)
}
}
}
}
</script>
<style lang="css">
.container {
width: 100%;
height: 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
border: 1px solid #999;
}
.search-box {
position: absolute;
z-index: 5;
width: 30%;
left: 13%;
top: 10px;
height: 30px;
}
.search-box input {
float: left;
width: 80%;
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>
然后下一步,就没然后了,就可以用了~~,想利用目前的组件做一些事情也是可以的,自行研究趴~ 最后再看一下我的效果!
结尾
内容结束~下次再会。
vue集成高德地图的更多相关文章
- vue调用高德地图:vue-amap
前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
- web集成高德地图
1.使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app 2.页面头引入 <div id="addressMap"> ...
- Android集成高德地图如何自定义marker
高德地图自定义Marker 高德地图默认的marker样式是这种 一般的修改样式是通过icon接口来调整 MarkerOptions markerOptions = new MarkerOptions ...
- vue 使用高德地图vue-amap组件
首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...
- Android 集成高德地图
先上一张图片看看实现的效果啦!!! 首先登陆高德的开发者平台进行创建自己的应用程序,填写对应的包名,填写sHA1值(这个我这博客中写了获取的代码,可以直接复制粘贴),说了这么多其实都是废话,来我们看重 ...
- vue 引用高德地图
vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...
随机推荐
- Hbase实用技巧:全量+增量数据的迁移方法
摘要:本文介绍了一种Hbase迁移的方法,可以在一些特定场景下运用. 背景 在Hbase使用过程中,使用的Hbase集群经常会因为某些原因需要数据迁移.大多数情况下,可以跟用户协商用离线的方式进行迁移 ...
- 【转】Hello SDL: Your First Graphics Window
FROM: http://lazyfoo.net/tutorials/SDL/01_hello_SDL/index2.php Hello SDL: Your First Graphics Window ...
- 关于Java引用,你必须知道这些
引用 Java 虚拟机接管了所有的内存分配与回收工作,极大地减少了程序员的工作量和错误率.GC 在回收内存时,通常采用被称为可达性分析的算法判断一个对象是否可以回收.而在可达性分析中,对象的引用有着决 ...
- freopen ()函数
1.格式 FILE * freopen ( const char * filename, const char * mode, FILE * stream ); 2.参数说明 filename: 要打 ...
- mysql数据库——选择优化的数据类型
选择更小的数据类型:一般情况下,应该尽量使用可以正确存储数据的最小数据类型.更小的数据类型通常更快,它们占用更少的磁盘.内存和CPU缓存,并且处理时需要的CPU周期也更少.但是要确保没有低估需要存储的 ...
- [Luogu P1829] [国家集训队]Crash的数字表格 / JZPTAB (莫比乌斯反演)
题面 传送门:洛咕 Solution 调到自闭,我好菜啊 为了方便讨论,以下式子\(m>=n\) 为了方便书写,以下式子中的除号均为向下取整 我们来颓柿子吧qwq 显然,题目让我们求: \(\l ...
- 我的第三次C语言作业
我的第三次C语言作业 这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-2 这个作业要求在哪里 https://edu.cnblogs.co ...
- Maven依赖管理系统
[背景] 之前在领英上读到一篇软文,<Managing Software Dependency at Scale>,讲述了领英是如何处理模块之间的依赖解析,以及如何去更好的处理依赖关系以及 ...
- 动态链接的PLT与GOT
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/147 最近在研究缓冲区溢出攻击的试验,发现其中有一种方法叫做re ...
- RBAC设计前期设计
//s用户表 create table userinfo( id int(18) primaryk key auto_increment, username varchar(50) not null ...