1.引入高德地图(在vue的index.html)
<!--1 引入高德地图 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>
2.创建项目页面(完整代码)
<template>
<div id="container">
</div>
</template>
<script>
export default {
data() {
return {
//要标记的所有点的经纬度
lnglats: [
[108.909074, 34.254225],
[108.910766, 34.254348],
[108.910495, 34.253531],
[108.909502, 34.253571],
],
};
},
mounted() {
this.setMapChart();
},
methods: {
//创建地图实例
setMapChart() {
//地图实例
let map = new AMap.Map("container", {
resizeEnable: true, //自适应大小
zoom: 13, //初始化视窗
pitch: 70, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: "3D", // 地图模式
});
// AMap是高德地图的构造函数,这里.Map是创建地图,.Marker是创建坐标点
//信息窗口实例
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
//遍历生成多个标记点
for (var i = 0, marker; i < this.lnglats.length; i++) {
var marker = new AMap.Marker({
position: this.lnglats[i], //不同标记点的经纬度
map: map,
});
//内部样式
marker.content = `<div style="width: 265px; height: 180px;font-size: 14px;">
<div class="center_title" style="border-bottom: 1px solid #000">080084</div>
<div style="display: flex; flex-direction: column; margin-top: 30px">
<div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
<div class="center_body_item_left">定位时间</div>
<div class="center_body_item_right">电池电量</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 0 20px; align-items: center; line-height: 20px;">
<div class="center_body_item_left">电池时间</div>
<div class="center_body_item_right">车辆状态</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
<div class="center_body_item_left">续航里程</div>
<div class="center_body_item_right">通电状态</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
<div class="center_body_item_left">地址描述</div>
<div class="center_body_item_right"></div>
</div>
</div>
<div style="margin-top: 20px;display: flex;justify-content: space-around;align-items: center;">
<div class="center_btn_x" onclick="getLen()">寻车</div>
<div class="center_btn_q">启动</div>
<div class="center_btn_adds">加锁</div>
<div class="center_btn_deles">解锁</div>
</div>
</div>
`;
marker.on("click", markerClick);
marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
//函数内的事件
window.getLen = ()=>{
console.log('点击了')
}
},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 100vh;
}
.center {
}
.center_body {
}
.center_body_item {
}
.center_btn {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
下边的样式是使用在内部的,写在外边的没办法修改内部样式,所以使用的是行内样式
效果:
版权声明:本文为qq_42876444原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。