VUE项目中高德地图选择坐标和输入搜索功能

插入高德地图的过程：

1.在HTML 页面中引入高德地图 JS API 的 JS文件
2.获取到 DOM 元素
3.将其作为容器，连同其它参数，传递给 new AMap.Map，创建一个地图实例
5.往地图里加入更多的元素

官方JS API文档地址 https://lbs.amap.com/api/javascript-api/summary/
官方JS API实例地址 https://lbs.amap.com/demo/javascript-api/example/marker/custom-icon-content

一、引入高德地图

申请key

在高德官网，申请key值。

index.html文件中加入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='申请的key&plugin=AMap.PolyEditor,AMap.DistrictSearch,AMap.Autocomplete"></script>

注意：引入高德的js代码要放在head部分，不能放在尾部，否则会报错： “AMap is not defined”。
3.

二、地图组件渲染


<!--
* @description: 地图搜索选地址，点点位选地址
* @fileName: MapLayouts.vue
* @author: zhanggoudan
* @date: 2021/07/05 09:36:54
* @引入: import MapLayout from "@/components/mapLayouts/MapLayouts.vue";
* @使用: 子组件绑定ref="map"
* @地图获取点位和地址:  1. getMapData(mapData)  地图点击点位自动调用该方法 mapData为点位信息，数据格式:{address, lat, lng}
* @地图设置点位和地址:  2. setMapData  通过父组件调用子组件方法形式设置点位 调用方式 this.$refs.map.setMapData({address, lat, lng});
!--><template><div class="maplayouts"><inputid="mapInput"class="mapInput"v-model="mapData.address"v-if="inputVisible"placeholder="请输入地址搜索"/><div class="container" id="map" :style="{ height: height + 'px' }"></div></div>
</template><script>
import icon from "@/assets/icon.png";
export default {props: {// 地图高度height: {type: Number,default: 600,},// 是否启用搜索框inputVisible: {type: Boolean,default: true,},// 地图初始化层级mapInitZoom:{type:Number,default:12,},// 初始化中心点位mapInitCenter:{type:Array,default:function() {return [115.988491, 36.477378];}},},data() {return {mapData: {address: "",lng: "",lat: "",},};},mounted() {this.init();},methods: {init() {this.initMap();},//地图绘制initMap() {this.map = new AMap.Map("map", {resizeEnable: true,zoom: this.mapInitZoom,center: this.mapInitCenter,mapStyle: "amap://styles/4886817cd43fb9d6f022ba1b762e3dc3",});let _that = this;// 点击点位this.map.on("click", (e) => {AMap.service("AMap.Geocoder", function () {let geocoder = new AMap.Geocoder({city: "", //城市，默认：“全国”});//地图上所标点的坐标var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];geocoder.getAddress(lnglatXY, function (status, result) {if (status === "complete" && result.info === "OK") {let addressinfo = result.regeocode.addressComponent;let address =addressinfo.city +addressinfo.street +addressinfo.township +addressinfo.streetNumber;let lng = e.lnglat.getLng();let lat = e.lnglat.getLat();_that.setMap({ address, lng, lat });}});});});if (this.inputVisible) {// 输入框选择let autoOptions = {input: "mapInput",};let auto = new AMap.Autocomplete(autoOptions);AMap.event.addListener(auto, "select", (e) => {let address = e?.poi?.name;let lng = e?.poi?.location?.lng;let lat = e?.poi?.location?.lat;_that.setMap({ address, lng, lat });});}},// 绘制点位setMap({ address, lng, lat }) {if (this.marker) {this.map.remove(this.marker);}this.marker = new AMap.Marker({icon: icon,map: this.map,position: [lng, lat],offset: new AMap.Pixel(-11.5, -11),});this.map.setCenter([lng, lat]);this.marker.setMap(this.map);this.mapData = {address,lng,lat,};this.getMapData(this.mapData);},// 地图数据参数传递给父组件getMapData(mapData) {this.$parent.getMapData(mapData);},// 父组件调用子组件方法setMapData(mapData) {this.setMap(mapData);},},
};
</script><style scoped>
.container {width: 100%;height: 500px;position: relative;}
#mapInput {height: 35px;}
</style>

注意:

注    意：   当使用ele ui框架会存在 this.$parent.getMapData is not function 报错问题解决办法:    将this.$parent.getMapData(mapData) 更改为this.$emit('getMapData',mapData) 原   因:      控制台输出this.parent发现找不到自己定义的component的父组件定需要通过 this.$parent.$parent.getMapData() 才可以可以调用到.

VUE项目中高德地图选择坐标和输入搜索功能相关推荐

vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...
vue项目中高德地图总是出不来的问题
创建地图是个很简单的API,但是地图时不时的出不来,这个问题就严重了,一时真查不出原因. 经过无数的测试,发现地图需要规矩化问题 vue是单页面应用,两个id一样的map,会出现出不来的问题具体为 ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
出行助手Vue项目中高德API的使用
本文章是出行助手项目使用高德API的一些经验,见程序代码及注释, 详情请查看高德API 高德地图初始化加载定位到当前城市(具体位置): 设置一个div挂载高德地图:<div id="m ...
vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...

VUE项目中高德地图选择坐标和输入搜索功能

一、引入高德地图

二、地图组件渲染

VUE项目中高德地图选择坐标和输入搜索功能相关推荐

最新文章

热门文章