也就是说,地图的背景色是透明的,然后放地图的盒子有背景色,或者放图片
模板的话就自己随便选择一个就行
如果对于省界线需要改变颜色的,也可以进行更改
public》index.html(记得该你的key)
-
- src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar">
-
- <script type="text/javascript" src="https://a.amap.com/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 https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
- export 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 = true
- script.src = 'https://webapi.amap.com/maps?v=2.0&callback=initAMap&key=你的key'
- script.onerror = reject
- document.head.appendChild(script)
- }
- window.initAMap = () => {
- resolve(window.AMap)
- }
- })
- }