也就是说，地图的背景色是透明的，然后放地图的盒子有背景色，或者放图片
第一步：创建自定义地图
模板的话就自己随便选择一个就行
第二步：修改样式
如果对于省界线需要改变颜色的，也可以进行更改
第三步：代码
public》index.html（记得该你的key）
<scriptsrc="/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script><script type="text/javascript" src="/jsapi_demos/static/demo-center/data/china-pp.js"></script>
页面（记得改你的key和秘钥）
<template><div id="dashboard" class="dashboard-container"><div class="dian"><div id="ditu" class="dituBox"></div></div></div></template><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "95dcc8d3a56f8e0f6804bfdf8f8aaa21",};</script><script>import { mapGetters } from "vuex";import MapLoader from "@/filters/AMap";let map;export default {name: "Dashboard",computed: {...mapGetters(["name"]),},data () {return {};},created () {MapLoader().then(() => {this.initmap("中华人民共和国"); //海量点});},methods: {initmap (city) {//密钥window._AMapSecurityConfig = {securityJsCode: "4dbb42c683243ff4538d3e9689abf102",};var disCountry = new AMap.DistrictLayer.Country({// zIndex: 10,// SOC: "CHN",// depth: 1,styles: {// "nation - stroke": "#fff",// "coastline - stroke": "#fff",// "province - stroke": "#fff","fill": function (props) {// return 'rgba(255, 255, 255, 0.9)'return 'rgba(0,0,0, 0)' //修改地图的颜色为透明色}}})// 创建地图map = new AMap.Map("ditu", {layers: [disCountry],zoom: 4,zooms: [4, 10],center: [104.884436, 33.915085],resizeEnable: true,showIndoorMap: false,mapStyle: "amap://styles/183d28f9e6ad5076bc7c4924ac9c606f",features: ["point", "road", "bg"], //地图要素viewMode: "2D",pitch: 45,zoomEnable: true,});// map.addControl(new AMap.Scale());// map.addControl(new AMap.ToolBar({ liteStyle: true }));// map.on('complete', function () {// var layer = new AMap.LabelsLayer({//// 开启标注避让，默认为开启，v1.4.15 新增属性//collision: false,//// 开启标注淡入动画，默认为开启，v1.4.15 新增属性//animation: true,// });// for (var i = 0; i < LabelsData.length; i++) {//var labelsMarker = new AMap.LabelMarker(LabelsData[i]);//layer.add(labelsMarker);// }// map.add(layer);// })},}}</script><style lang="scss" scoped>.dian {// background-image: url('../../assets/404_images/404.png');background-color: aquamarine;.dituBox {width: 80%;height: 1000px;background-color: transparent !important;}}</style>
封装MapLoader 方法（记得改你的key）
// AMap.js// 高德map /maps?v=1.4.11&key=你的高德地图的keyexport default function MapLoader () {return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AMap)} else {var script = document.createElement('script')script.type = 'text/javascript'script.async = truescript.src = '/maps?v=2.0&callback=initAMap&key=你的key'script.onerror = rejectdocument.head.appendChild(script)}window.initAMap = () => {resolve(window.AMap)}})}
