vue使用高德地图web端JS API（vue-amap插件）

高德地图地图 JS API v2.0：https://lbs.amap.com/api/jsapi-v2/summary/
vue-amap(基于Vue 2.0和高德地图的地图组件):https://elemefe.github.io/vue-amap/#/

1、npm安装vue-amap
npm install vue-amap --save
2、main.js初始化vue-amap

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({key: '在高德地图平台申请的key',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder','AMap.ElasticMarker']//一些需要用到的插件
})

3、在页面中使用

<template><div id="container"></div><input id="key-input" placeholder="请输入关键字"/>
</template>
<script>export default{data(){return{map:''}},mounted(){// 初始化地图,初始化要放在$nextTick里面,一开始使用的话会找不到id="container"的DMOthis.$nextTick(() => {this.init()})},methods:{init(){let that = this// 初始化this.map = new AMap.Map('container', {resizeEnable: true})// 输入框输入事件var autoOptions = {input: 'key-input'}var auto = new AMap.Autocomplete(autoOptions)var placeSearch = new AMap.PlaceSearch({map: that.map,extensions: 'all',children: 1})// 展示下拉选项AMap.event.addListener(auto, 'select', function(e) {placeSearch.setCity(e.poi.adcode)placeSearch.search(e.poi.name)let data = {poiAddress: e.poi.name,region: e.poi.adcode}that.mapData = data})// 地图鼠标点击事件this.map.on('click', (e) => {let lng = e.lnglat.lnglet lat = e.lnglat.latlet marker = new AMap.Marker({position: new AMap.LngLat(lng, lat)})// 根据点击地图的经纬度获取地址详情let geocoder = new AMap.Geocoder({ batch: false, city: '' })geocoder.getAddress([lng, lat], function(status, res) {if (res.info == 'OK') {// 显示点标志的信息窗口let infoWindow = new AMap.InfoWindow({anchor: 'top-left',content: res.regeocode.formattedAddress})infoWindow.open(that.map, [lng, lat])}})that.map.clearMap()// 清除所有覆盖物（点标志）that.map.add(marker)// 添加点标志})}}}
</script>
//先初始化

创建地图后

输入框输入事件

地图鼠标点击事件，根据点击地图的经纬度获取地址详情，清除所有覆盖物（点标志），添加点标志

ps：高德地图有一些地区获取有问题，是高德地图自身的问题。比如台湾省，只能获取到省份，区、县都获取不了。。。
pps：如果涉及到敏感问题，请联系删除。谢谢

vue使用高德地图web端JS API（vue-amap插件）相关推荐

高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...
高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)
遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物. 话不多说,直接走步骤! First. 需要登录高德开发者控制台,在地 ...
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
高德地图web端js
下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({isCustom:true,// ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图web端接入
1.准备阶段进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...
高德地图WEB端软件应用
以前就想自己做一个旅游导航项目,在网上一搜发现了高德地图开放平台,发现高德可以非常简单地应用到自己的项目中,当即我申请了一个 key来学习,仔细研究了一下,觉得还是挺难的,网上找了一些案例什么的,经过 ...

vue使用高德地图web端JS API（vue-amap插件）

vue使用高德地图web端JS API（vue-amap插件）相关推荐

最新文章

热门文章