百度了一大堆。乱七八糟的。
其实不需要安装什么。
下面就是步骤:
这里可以获取想要位置的经纬度
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=638bc48934e46413faf2432fdd11a6ce">
</script>
</body>
</html>
vue.config.js
module.exports = {
// 热更新配置
// chainWebpack: config => {
// // 修复HMR
// config.resolve.symlinks(true);
// },
configureWebpack: {
externals: {
"AMap": "AMap"
}
}
};
地图页面:
<template>
<div class="about">
<div class="big-img">
<img :src="imgUrl.src" alt="关于我们"/>
</div>
<div class="main-box">
<h1>关于我们</h1>
<!--公司简介-->
<div class="company-profile">
<h2>公司简介</h2>
<p>
aaaaaaaaaaa
</p>
</div>
<!-- 荣誉资质-->
<div class="honor-and-qualification">
<h2>荣誉资质</h2>
<h2>honor-and-qualification</h2>
<ul>
<li v-for="(item, index) in honorAndQualificationList" :key="index">
<img :src="item.url" :alt="item.text">
<h2>{{ item.text }}</h2>
</li>
</ul>
</div>
<div class="clearfix"></div>
<!-- 联系我们-->
<div class="contact-us">
<h2>联系我们</h2>
<p>欢迎来到a公司,如果您有需要意向,
请您留言或者是通过以下方式联系我们!</p>
<p>电话:028-85756992 028-85756996</p>
<p>邮箱:
<a href="mailto:1123456789@qq.com">
1123456789@qq.com
</a>
</p>
<p>地址:中国·四川省泸州市高新工业开发区</p>
<!--二维码-->
<div class="QR-code">
<div>
<img :src="xcxImgSrc" alt="小程序二维码">
<p>小程序二维码</p>
</div>
<div>
<img :src="wxImgSrc" alt="微信二维码">
<p>微信二维码</p>
</div>
</div>
</div>
<!-- 地图-->
<div id="mapContainer"></div>
</div>
</div>
</template>
<script>
import AMap from "AMap";
export default {
name: "About",
data() {
return {
honorAndQualificationList: [
{
url: require('../../assets/images/zizhi1.jpg'),
text: '荣誉1'
},
{
url: require('../../assets/images/zizhi2.jpg'),
text: '荣誉2'
},
{
url: require('../../assets/images/zizhi3.jpg'),
text: '荣誉3'
},
{
url: require('../../assets/images/zizhi4.jpg'),
text: '荣誉4'
},
{
url: require('../../assets/images/zizhi5.jpg'),
text: '荣誉5'
},
{
url: require('../../assets/images/zizhi6.jpg'),
text: '荣誉6'
},
],
imgUrl: {
src: require('../../assets/images/gywm.jpg'),
},
xcxImgSrc: require('../../assets/images/ewmxcx.jpg'),
wxImgSrc: require('../../assets/images/ewmwx.jpg'),
}
},
mounted() {
this.showMap()
},
methods: {
showMap() {
let map = new AMap.Map("mapContainer", {
resizeEnable: true,
center: [104.037969,30.521942],
zoom: 13,
})
// 坐标点
let marker = new AMap.Marker({
position: new AMap.LngLat(104.037969,30.521942), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京'
});
// 将创建的点标记添加到已有的地图实例:
map.add(marker);
// 同时引入工具条插件,比例尺插件和鹰眼插件
AMap.plugin([
'AMap.ToolBar',
'AMap.Scale',
'AMap.OverView',
'AMap.MapType',
'AMap.Geolocation',
], function () {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件,在地图右下角显示地图的缩略图
map.addControl(new AMap.OverView({isOpen: true}));
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
// 在图面添加定位控件,用来获取和展示用户主机所在的经纬度位置
map.addControl(new AMap.Geolocation());
});
}
}
}
</script>
<style lang="scss" scoped>
.clearfix {
clear: both;
}
.about {
background-color: lightskyblue;
width: 100%;
height: 100%;
margin-top: 70px;
margin-bottom: 100px;
.big-img {
//margin-top: 70px;
}
.main-box {
width: 1200px;
height: 100%;
margin: 0 auto;
.company-profile {
}
.honor-and-qualification {
margin-top: 70px;
ul {
margin-left: 40px;
li {
list-style: none;
width: 310px;
border: 1px solid black;
margin: 10px;
padding: 20px;
float: left;
img {
width: 350px;
height: 300px;
}
}
li:hover {
border: 1px solid blue;
}
}
}
.contact-us {
height: 1000px;
.QR-code {
div {
width: 200px;
height: 200px;
float: left;
margin: 50px;
}
}
}
#mapContainer {
width: 1000px;
height: 500px;
background-color: #ffffff;
margin: 50px;
}
}
}
</style>