一、在public——>index.html里引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cb6152d432c370a781b4b2a80a84e9a6&plugin=AMap.Geocoder"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
注：这个在高德官网里复制。
二、然后在vue.config.js里面配置一下，否则会报错，报AMap未定义。
module.exports = {
configureWebpack: {
externals: {
AMap: "window.AMap",
AMapUI: 'window.AMapUI'
}
}
};
三、使用
<!--
* @Author:
* @Date: 2020-11-29 17:17:28
* @LastEditors:
* @LastEditTime: 2020-12-01 16:04:02
* @FilePath:
* @Description: 地图的使用
* 参考博客：https://blog.csdn.net/lxy869718069/article/details/106355927
https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers
-->
<template>
<div class="map_box">
<!-- 这个 是构建地图 -->
<div style="width: 100vw;height: 100vh" ref="map" id="map"></div>
<div class="map_bottom">
<p>{{text}}</p>
<span @touchstart="navigation()">
<img src="https://gitee.com/Green_chicken/picture/raw/master/2020-12-1/1606810838380-navigation.png" alt="">
</span>
</div>
</div>
</template>
<script>
//引用AMap
import AMap from "AMap";
export default {
data() {
return {
text: "",
img: "https://gitee.com/Green_chicken/picture/raw/master/2020-12-1/1606810783390-duanluhe.png",
lnglat: [
{ text: '新棋周变 | 狮子线1', lnglats: [116.368904, 39.923423] },
{ text: '新棋周变 | 狮子线2', lnglats: [116.382122, 39.921176] },
{ text: '新棋周变 | 狮子线3', lnglats: [116.387271, 39.922501] },
{ text: '新棋周变 | 狮子线4', lnglats: [116.398258, 39.914600] }
],
lnglats: [],//这个 点击每个点获取的经纬度
};
},
created() {
this.Map_call();
},
methods: {
/**
* @description: 调用原生的导航
*/
navigation() {
console.log(this.lnglats);
},
Map_call() {
this.$nextTick(() => {
this.structure();
})
},
/**
* @description: 构建地图，并且设置中心点
* @param {type} lng 经度 lat 纬度
* @return {type}
*/
structure() {
let that = this;
let map = new AMap.Map(this.$refs.map, {
resizeEnable: true,
center: that.lnglat[0].lnglats,//地图中心点
zoom: 10//设置初始图层
});
/**
* @description:下面是坐标转换，gps转高德
* @param {type}
* @return {type}
*/
that.lnglat.forEach(item => {
AMap.convertFrom(item.lnglats, 'gps', function (status, result) {
if (result.info === 'ok') {
let marker = new AMap.Marker({
position: item.lnglats,
map: map,
// icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
icon: that.img,
});
marker.content = `${item.text}`;
marker.on('click', markerClick);
marker.emit('click', { target: marker });//这个 是窗口自动打开
map.setMarker;
}
});
})
/*
//这个是单点地图
AMap.convertFrom([116.368904, 39.923423], 'gps', function (status, result) {
if (result.info === 'ok') {
let marker = new AMap.Marker({
position: [116.368904, 39.923423],
map: map,
// icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
icon: that.img,
});
marker.content = `新棋周变 | 狮子线`;
marker.on('click', markerClick);
marker.emit('click', { target: marker });//这个 是窗口自动打开
map.setMarker;
}
});
*/
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, 0), closeWhenClickMap: false, autoMove: true });
function markerClick(e) {
// console.log(e.target.Ce.position.lng);
// console.log(e.target.Ce.position.lat);
that.lnglats = [e.target.Ce.position.lng, e.target.Ce.position.lat];
that.text = e.target.content;
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
},
mounted() {
}
};
</script>
<style scoped>
.map_box {
position: relative;
}
.map_bottom {
position: absolute;
z-index: 1;
bottom: 80px;
left: 30px;
display: flex;
align-items: center;
}
.map_bottom span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background: #3282ff;
box-shadow: 0px 4px 9px 1px rgba(50, 130, 255, 0.3);
border-radius: 30px;
margin-left: 30px;
}
.map_bottom span > img {
width: 30px;
height: 30px;
margin-right: 6px;
}
.map_bottom p:nth-of-type(1) {
width: 597px;
height: 88px;
background: #ffffff;
box-shadow: 0px 3px 7px 3px rgba(181, 181, 181, 0.17);
border-radius: 10px;
line-height: 88px;
padding-left: 30px;
box-sizing: border-box;
font-size: 30px;
font-weight: bold;
color: #333333;
}
/* 去掉地图上 */
#map >>> .amap-copyright {
display: none !important;
}
/* 这个 是隐藏了 弹出框 */
#map >>> .amap-info-contentContainer {
display: none !important;
}
#map >>> .amap-icon {
height: 52px;
width: 52px;
}
#map >>> .amap-icon img {
height: 52px;
width: 52px;
}
</style>
四、在vue页面或者组件里面使用，推荐这样，可以减少高德地图的资源加载，优化性能
1、下载依赖包：
npm i webpack-require-http --save
注：也要取消vue.config.js中的eslint代码格式检查，在vue.config.js中的配置如下：
module.exports = {
lintOnSave: false,
configureWebpack: {
//引入webpack-require-http，可以让其在文件里，进行资源请求
externals: [
require('webpack-require-http')
]
},
}
2、使用（封装成了一个组件,可以传入多个坐标）
<!--
* @Description: https://blog.csdn.net/lxy869718069/article/details/106355927
https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers
https://blog.csdn.net/qq_20567691/article/details/81191987
https://zhuanlan.zhihu.com/p/28497528
-->
<template>
<div style="height:100vh" ref="gaoDeMap">
</div>
</template>
<script>
export default {
props: {
lngLat: {
type: Array,
default() {
return [
//默认演示，name是名字，value是坐标
{ name: "", value: [116.205467, 39.907761] }
]
}
}
},
mounted() {
/**
* 获取地图的资源
*/
Promise.all([require("https://webapi.amap.com/maps?v=1.4.15&key=cb6152d432c370a781b4b2a80a84e9a6&plugin=AMap.Geocoder")]).then(() => {
this.$nextTick(() => {
this.structure();
})
})
},
methods: {
/**
* @description: 构建地图，并且设置中心点
* @param {type} lng 经度 lat 纬度
* @return {type}
*/
structure() {
let that = this;
// 这个是构建地图
let map = new AMap.Map(this.$refs.gaoDeMap, {
resizeEnable: true,
center: that.lngLat[0].value,//地图中心点
zoom: 13//设置初始图层
});
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
/**
* 下面是坐标转换，gps转高德
*/
that.lngLat.forEach(item => {
AMap.convertFrom(item.value, 'gps', function (status, result) {
if (result.info === 'ok') {
let marker = new AMap.Marker({
position: item.value,
map: map,
icon: "",
});
// 这个是根据当前坐标 获取实时位置
geocoder.getAddress(item.value, function (status, result) {
if (status === 'complete' && result.regeocode) {
const addre = result.regeocode.formattedAddress;
/* 这块确定弹出框里面的内容，也可以展示name，那么写法就是 item.name */
marker.content = `${addre}`;
marker.on('click', markerClick);
marker.emit('click', { target: marker });//这个 是窗口自动打开
map.setMarker;
}
})
}
});
})
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30), closeWhenClickMap: false, autoMove: true });
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
}
};
</script>
