一、vue如何引入高德地图
npm install vue-amap --save
// main.js文件中
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '**这里用您申请的key**',
// 插件库
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
uiVersion: '1.0.11', // ui库版本，不配置不加载,
v: '1.4.4'
});
二、展示3d地图
amap-3D-效果图
// 拷贝即可使用
<template>
<div class="contains">
<h3 class="title">{{ msg }}</h3>
<div id="amapall" class="all-amap"></div>
</div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
data() {
return {
msg: "vue-amap 3D 展示",
map: {},
};
},
mounted() {
this.initAmap();
},
methods: {
initAmap() {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map("amapall", {
center: new AMap.LngLat(121.59996, 31.197646),
pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
zoom: 20,
rotation: -15,
viewMode: "3D", //开启3D视图,默认为关闭
buildingAnimation: true, //楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 20],
features: ["bg", "road", "building","point"],// 这里指想展示什么数据就设置，目前只支持这四种，下图给出了对应字段的意思
});
});
},
},
};
</script>
<style scoped>
.contains {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
background-color: aqua;
flex-direction: column;
}
.all-amap {
top: 70px;
position: absolute;
width: 100%;
bottom: 0;
}
</style>
features
三、自定义地图的样式
// 核心代码
var map = new AMap.Map('containerID',{
mapStyle: 'amap://styles/XX', // 设置地图的显示样式 ，"XX" 可以是自定义的地图ID也可以是官方的样式。
});
1.使用官方提供的地图样式
// 例如我想显示上图右上角中的"幻影黑(dark)" 样式。代码👇
var map = new AMap.Map('containerID',{
// mapStyle: 'amap://styles/XX',
mapStyle: 'amap://styles/dark', // 只需要将‘XX’换成对应的样式名称即可
});
2.使用自己的自定义地图
2-1、如何制作地图
1.进入自定义地图模板
2.选择一款你想修改的地图如下图
3.点击跳转页面后你会发现如下页面的几个醒目的字
意思是说您申请的key值必须是"Web端（JS API）"否则不会生效 如下图所示选择的服务平台
4.修改地图的样式
比如修改陆地的颜色 👇
其他色值的修改方式也一样
5.发布地图自定义样式（如果不发布是用不了的）
发布完成后返回
6.使用自定义样式
1.点击使用与分享
2.复制样式Id
// 代码 👇
var map = new AMap.Map('containerID',{
// mapStyle: 'amap://styles/XX',
mapStyle: 'amap://styles/e5bfa8612b85f1be', // 只需要将‘XX’换成6中的样式id即可，这里的id我删除了部分字段所以用不了，需要您自己申请。
});
