vue项目使用高德地图

vue项目使用高德地图-部分功能介绍

在此做个笔记，引入方式使用了高德2.0 loadsh的加载方式

1、引入高德地图方式-NPM

npm i @amap/amap-jsapi-loader --save

在页面引入
import AMapLoader from “@amap/amap-jsapi-loader”

这是官网的引入介绍，在版本version我想引入2.0，写了2.0被报错key409那个报错，意思是我调用了我没权限的api服务，调错东西。后面我改成默认的才成功渲染

//在vue的index.html中引入安全秘钥，官网有两种方式，我没服务器啥的用明文了
<script>window._AMapSecurityConfig = {securityJsCode:'秘钥',};
</script>AMapLoader.load({"key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填"version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等"AMapUI": {             // 是否加载 AMapUI，缺省不加载"version": '1.1',   // AMapUI 缺省 1.1"plugins":[],       // 需要加载的 AMapUI ui插件},"Loca":{                // 是否加载 Loca， 缺省不加载"version": '1.3.2'  // Loca 版本，缺省 1.3.2},
}).then((AMap)=>{map = new AMap.Map('container');
}).catch(e => {console.log(e);
})

2、先看地图效果
以下的功能，涉及，地图主题的更改，点标记的点击事件，信息弹窗的自定义内容，生成marker点；
下面是目前地图的效果

以下是我的代码，以及做的功能，点标记和信息窗体
1、创建地图实例，并且引入需要的插件
2、我需要的功能是，实现通过后端数据，渲染maker点标记，并且点击点标记会定位到当前maker的视野，并且弹窗自定义内容的信息弹窗，
3、里面还有个方法是获取点击地图的地理信息编码，获取到经纬度，再生成一个maker 渲染到map地图上，这个api需要权限，我的key是个人开发者
4、不习惯一段一段截图，我感觉不够清晰，我直接截图整个methods的方法，在方法写了备注。

<div id="map"><div id="container"></div><infoModal v-show="showInfo" :infoObj="infoObj" ref="info" @closeInFo="closeInFo" /></div>

import infoModal from "@/components/infoModal.vue"data() {return {map: null,geocoder: null, // 地理编码与逆地理编码类，用于地址描述与坐标之间的转换infoWindow: null, // 用于在地图上弹出一个详细信息展示窗体showInfo:false, // 控制信息窗体的组件隐藏infoObj:{  // 传递给信息弹窗的数据title:"项目介绍",contentList:[{code:"编号：SSSSSSDEJUW",num:"创航向：126°"},{code:"编号：SSSSSSDEJUW",num:"创航向：126°"}]}}},
mounted() {this.loadmap()},
methods{async  loadmap() {await this.handelAllRquest(); //请求数据的方法const that = thisAMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale", "AMap.Geocoder", " AMap.InfoWindow", "AMap.ToolBar",'AMap.SimpleInfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then((AMap) => {// 创建一个地图实例that.map = new AMap.Map("container", {resizeEnable: true,zoom: 4, // 这个是控制视野的距离，越小，地图显示越大，这个zoom =4，渲染的时候是中国地图的视野pitch: 4, // 地图俯仰角度，有效范围 0 度- 83 度，即开启3D地图的扁平程度viewMode: "3D", // 地图模式})//给地图新增缩放条，和 地图左下角的海里控件that.map.addControl(new AMap.Scale())that.map.addControl(new AMap.ToolBar())//  that.map.setMapStyle('amap://styles/blue');  控制地图主题的api，darkblue是极夜蓝，下面会贴出我的地图效果that.map.setMapStyle('amap://styles/darkblue');// 地理编码与逆地理编码类，用于地址描述与坐标之间的转换that.geocoder = new AMap.Geocoder()// 创建信息弹窗实例，用于在地图上弹出一个详细信息展示窗体that.infoWindow =  new AMap.InfoWindow({isCustom: true,  //使用自定义窗体，则默认的样式都没offset: new AMap.Pixel(0, -35),//控制弹窗的偏移量})//这个是通过获取到后端数据的经纬度，通过循环生成 maker点(点标记)for (let i = 0, marker; i < lnglats.length; i++) {let marker = new AMap.Marker({position: lnglats[i],map: that.map,extData:{title:'我是帅哥',content:"6666666666"}})// 设置点标记的动画效果，此处为弹跳效果// marker.setAnimation("AMAP_ANIMATION_BOUNCE")//这个是注册maker的点击事件marker.on("click", that.markerClick)// marker.emit("click", { target: marker })  这个会自动打开for循环的最后一个maker点的信息}that.map.setFitView() // 当生成marker后 设置地图mapthat.map.setZoom(3.9) // 当渲染maker后，一开始地图实例的zoom好像被maker的控件修改了，所以在代码后面重设zoom，我的需求是一开始展示是中国地图，这个看自己需求that.map.setPitch(25) // 设置pitch的角度// // 地图绑定点击事件that.map.on("click", (event) => {//这个其实就是 点击地图，生成一个maker的功能that.addMrker(event.lnglat)})}).catch((e) => {console.log(e, "高德地图加载失败")})},// 地图点击增加标记点addMrker(position) {// 点击marker展示信息弹框const _this = this// 根据点击位置经纬度查询详细信息，key需要调用api权限this.geocoder.getAddress([position.lng, position.lat], (status, result) => {if (status === "complete" && result.info === "OK") {console.log("成功查询地址")this.map.clearInfoWindow() // 清楚地图上的信息弹窗const marker = new AMap.Marker({map: _this.map,position: new AMap.LngLat(position.lng, position.lat),//marker经纬度设置size: new AMap.Size(60, 26),//marker大小offset: new AMap.Pixel(-10, -33),extData: result.regeocode, // 信息窗展示信息，这个属性，是用于自定义点击marker显示弹窗内容的，可以用marker.getExtData()获取到自定义的数据})// 点击marker展示信息弹框marker.on("click", (e) => {// _this.addInfowindow(marker)})_this.map.add(marker) //新增markermarker.setMap(_this.map) //重置map}})},//标记点 点击事件markerClick(e) {this.showInfo = false; // 控制信息弹窗let obj = e.target.getExtData();//获取maker的自定义数据this.showInfo = true;this.infoObj.title = obj.title // infoObj是传递给信息弹窗组件的数据this.infoWindow.setContent(this.$refs.info.$el)//这个是获取整个弹窗的组件dom，绘画到infoWindow控件里面，setContent可识别html字符串this.infoWindow.open(this.map,e.target.getPosition());//控制infoWindow控件，打开，传递经纬度// this.infoWindow.setContent(e.target.content)  原生信息窗体的api// this.infoWindow.open(this.map, e.target.getPosition())// let marker = new AMap.Marker()// let option = [e.lnglat.lng, e.lnglat.lat]// //  marker.setMap(this.map);// marker.setPosition(option)this.map.setCenter(e.target.getPosition()) // 这个是设置地图的中心点视野this.map.setZoom(15)},//关闭弹窗closeInFo(value) {this.infoWindow.close()this.showInfo = value;},}

以下是弹窗的组件代码

<template><div ref="info"><div class="btn btn-primary btn-ghost btn-shine"><div class="title"><span>{{ infoObj.title}}</span><span @click="handleCloseInFo()">x</span></div><div class="content-item" v-for="(item,index) in infoObj.contentList" :key="index"><span class="m-rigth">编号：{{item.code}}</span><span class="" style="color: #fff !important;">创航向：{{item.num}}</span></div></div></div>
</template><script>
export default {name: 'info',props: {infoObj:{type:Object,default:()=>{return   {title:"项目介绍",contentList:[{code:"编号：SSSSSSDEJUW",num:"创航向：126°"},{code:"编号：SSSSSSDEJUW",num:"创航向：126°"}]}}}},data() {return {};},computed: {},created() {},mounted() {},watch: {},methods: {handleCloseInFo(){this.$emit('closeInFo',false)}},
};
</script><style scoped lang="less">
.title{display:flex;align-items: center;justify-content: space-between;font-size:14px;font-weight: 600;margin-bottom: 5px;
}
.content-item{font-size:12px;
}
.m-rigth{margin-right:10px;
}
.btn {width:100%;height:100%;--hue: 190;position: relative;padding:8px 10px 10px 10px;font-size: 1rem;line-height: 1.5;color: white;text-decoration: none;text-transform: uppercase;background: #1A1E23;border: 1px solid hsl(var(--hue), 100%, 41%);outline: transparent;overflow: hidden;cursor: pointer;user-select: none;white-space: nowrap;transition: 0.25s;z-index:999999 !important;&-primary {--hue: 187;}&-ghost {color: hsl(var(--hue), 100%, 41%);background-color: transparent;background: #1A1E23;}&-shine {color: white;&::before {position: absolute;content: "";top: 0;left: 0;width: 100%;height: 100%;background: transparent;transform: translateX(-100%);transition: 0.6s;}box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);}
}
</style>

vue项目使用高德地图相关推荐

vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
Vue项目引用高德地图实现车辆轨迹回放
一.引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&a ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...
四、vue 项目使用高德地图画面(多边形)
1.首先,我们要在在引入高德地图的文件里,在key后面加上&plugin=AMap.MouseTool <script src="https://webapi.amap.com ...
vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...

vue项目使用高德地图

vue项目使用高德地图-部分功能介绍

vue项目使用高德地图相关推荐

最新文章

热门文章