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 = this
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.Geocoder", " AMap.InfoWindow", "AMap.ToolBar",'AMap.SimpleInfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加载的 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后 设置地图map
that.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) //新增marker
marker.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>