菜单 搜索
首页 前端知识 vue vue-amap echarts-amap echarts 高德地图开发在线省市地图并标记点.

vue vue-amap echarts-amap echarts 高德地图开发在线省市地图并标记点.

2024-05-09 10:05:26 前端知识 前端哥 101 825 我要收藏

最终效果图：
在这里插入图片描述
首先需要引入：

1：在index.html中引入：

   <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '自己去高德地图申请',
    }
  </script>
  <script src="https://webapi.amap.com/maps?key=高德地图官网申请key&v=1.4.15"></script>
复制

key需要自己去高德地图官网申请.

2.在画图的vue页面引入：

import * as echarts from "echarts";
import VueAMap from "vue-amap"; //高德地图插件
import "echarts-amap";
复制

3.开始画地图

 init() {
      let _this = this
      AMap.plugin(
        ['AMap.DistrictSearch', 'AMap.MapType', 'AMap.CustomLayer'],
        function () {
          var district = new AMap.DistrictSearch({
            extensions: 'all',
            level: 'province', //省市县对应的不同，根据自己的需求去改
          })
          district.search('河北省', function (status, result) { //河北省改成你需要的省份
            var bounds = result.districtList[0].boundaries
            var districts = result.districtList[0].districtList
 
            var mask = []
            for (var i = 0; i < bounds.length; i++) {
              mask.push([bounds[i]])
            }
            var myChart = echarts.init(document.getElementById('mapData')) //初始化容器
 
            var option = {
              animation: false,
              amap: {
                mask: mask,
                center: [116.397428, 39.90923],
                viewMode: '3D',
                zoom: 6.7,
                defaultCursor: 'auto',
              },
              series: _this.seriesData,
            }
            myChart.setOption(option)
            var map = myChart.getModel().getComponent('amap').getAMap()
            var layer = myChart.getModel().getComponent('amap').getLayer()
            var mapType = new AMap.MapType({
              defaultType: 1,
            })
            // console.log(JSON.stringify(mapType));
  
            map.addControl(mapType)
            mapType.hide()
 
            var LabelsData = []
 
            for (var i = 0; i < districts.length; i++) {
              var config = {
                name: '',
                // position: [116.12, 39.11],
                zooms: [4, 13],
                zIndex: 1,
                opacity: 1,
                text: {
                  content: '',
                  direction: 'center',
                  offset: [0, 0],
                  zooms: [3, 20],
                  style: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    fillColor: '#fff',
                    strokeColor: '#fff',
                    strokeWidth: 1,
                  },
                },
              }
 
              var district = districts[i]
              var name = district.name
 
              config.text.content = name
              config.position = [district.center.lng, district.center.lat]
 
              LabelsData.push(config)
 
              var district2 = new AMap.DistrictSearch({
                extensions: 'all',
                level: 'city',
              })
             
 
              district2.search(name, function (status, result) {
                var bounds = result.districtList[0].boundaries
     
                for (var ii = 0; ii < bounds.length; ii++) {
                  new AMap.Polyline({
                    map: map,
                    path: bounds[ii],
                    strokeColor: '#E7D8BC',
                    strokeWeight: 2,
                  })
                }
              })
            }
 
            for (var i = 0; i < bounds.length; i++) {
              new AMap.Polyline({
                map: map,
                path: bounds[i],
                strokeColor: '#E7D8BC',
                strokeWeight: 6,
              })
            }
 
            map.on('complete', function () {
              var layer = new AMap.LabelsLayer({
                collision: false,
                animation: true,
              })
 
              for (var i = 0; i < LabelsData.length; i++) {
                var labelsMarker = new AMap.LabelMarker(LabelsData[i])
                layer.add(labelsMarker)
              }
              map.add(layer)
              document.getElementsByClassName(
                'amap-container'
              )[0].style.background = 'none'
            })
          })
        }
      )
    },
复制

4.完整代码

<!--  -->
<template>
  <div class="">
    <div class="amapBox">
      <div id="mapData" ref="mapData" style="width: 96%; height: 720px"></div>
    </div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
 
import VueAMap from "vue-amap"; //高德地图插件
import "echarts-amap";
import imgIcon1 from "@/assets/login/1.png";
import imgIcon2 from "@/assets/login/19.png";
import imgIcon3 from "@/assets/login/1.png";
import imgIcon4 from "@/assets/login/19.png";
// import AMap from 'AMap'
// import {findFcxxListByCompanyCodeAndFdlx} from '@/api/dashboard/dashboardApi'
// let AMap = Amap;
export default {
  props: {
    mapDataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data(vm) {
    return {
      mapData: null,
      goals: [
        {
          name: "风电场1",
          images: imgIcon1,
          value: [113.775669, 38.709836],
        },
        {
          name: "风电场2",
          images: imgIcon1,
          value: [114.775669, 40.709836],
        },
        {
          name: "光伏1",
          images: imgIcon2,
          value: [115.775669, 41.709836],
        },
        {
          name: "光伏2",
          symbol: "image://" + imgIcon2,
 
          value: [114.775669, 39.709836],
        },
      ],
      goalsTow: [],
      goalsThree: [],
      goalsfour: [],
      seriesData: [],
    };
  },
  watch: {},
  //方法集合
  methods: {
    initData() {
      console.log(VueAMap);
      this.seriesData = [
        {
          name: "点",
          type: "scatter",
          coordinateSystem: "amap",
          zlevel: 9999,
 
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}',
                color:'#fff',
                padding:[10,20,10,20],
                backgroundColor:'rgba(0,0,0,0.5)'
              },
            
          },
          itemStyle: {
            normal: {
              color: "#4892C2",
              shadowBlur: 12,
              shadowColor: "#fff",
            },
          },
          showAllSymbol: true,
          symbolSize: "20",
          symbol: `image://${imgIcon1}`,
          symbolRotate: 35,
          data: this.goals,
        },
        {
          name: "点",
          type: "scatter",
          coordinateSystem: "amap",
          zlevel: 9999,
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: "#4892C2",
              shadowBlur: 12,
              shadowColor: "#fff",
            },
          },
          showAllSymbol: true,
          symbolSize: 26,
          symbol: `image://${imgIcon2}`,
          symbolRotate: 35,
          data: this.goalsTow,
        },
        {
          name: "点",
          type: "scatter",
          coordinateSystem: "amap",
          zlevel: 9999,
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: "#4892C2",
              shadowBlur: 12,
              shadowColor: "#fff",
            },
          },
          showAllSymbol: true,
          symbolSize: 26,
          symbol: `image://${imgIcon3}`,
          symbolRotate: 35,
          data: this.goalsThree,
        },
        {
          name: "点",
          type: "scatter",
          coordinateSystem: "amap",
          zlevel: 9999,
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: "#4892C2",
              shadowBlur: 12,
              shadowColor: "#fff",
            },
          },
          showAllSymbol: true,
          symbolSize: 26,
          symbol: `image://${imgIcon4}`,
          symbolRotate: 35,
          data: this.goalsfour,
        },
      ];
      this.init();
    },
    dataReturnFn(v) {
      let that = this;
      let obj = {
        name: v.name,
        value: v.gps,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return "{div|" + params.name + "}";
            },
            padding: [0, 0, 0, -120], //内边距属性
 
            rich: {
              div: {
                color: "#fff",
 
                padding: [5, 10, 5, 10],
                backgroundColor: "rgba(0,0,0,0.9)",
              },
            },
          },
        },
      };
      return {
        type1: () => {
          return that.goals.push(obj);
        },
        type2: () => {
          return that.goalsTow.push(obj);
        },
        type3: () => {
          return that.goalsThree.push(obj);
        },
        type4: () => {
          return that.goalsfour.push(obj);
        },
      };
    },
    handlerMapData(v, i) {
      this.dataReturnFn(v)["type" + i]();
    },
    init() {
      let _this = this;
      AMap.plugin(
        ["AMap.DistrictSearch", "AMap.MapType", "AMap.CustomLayer"],
        function () {
          var district = new AMap.DistrictSearch({
            extensions: "all",
            level: "province",
          });
          district.search("河北省", function (status, result) {
            var bounds = result.districtList[0].boundaries;
            var districts = result.districtList[0].districtList;
 
            var mask = [];
            for (var i = 0; i < bounds.length; i++) {
              mask.push([bounds[i]]);
            }
            var myChart = echarts.init(document.getElementById("mapData"));
 
            console.log(mask);
 
            console.log(districts);
            var option = {
              animation: false,
              amap: {
                mask: mask,
                center: [116.397428, 39.90923],
                viewMode: "3D",
                zoom: 6.7,
                defaultCursor: "auto",
              },
              series: _this.seriesData,
            };
            myChart.setOption(option);
            var map = myChart.getModel().getComponent("amap").getAMap();
            var layer = myChart.getModel().getComponent("amap").getLayer();
            console.log(layer);
            var mapType = new AMap.MapType({
              defaultType: 1,
            });
            // console.log(JSON.stringify(mapType));
 
            map.addControl(mapType);
            mapType.hide();
 
            var LabelsData = [];
 
            for (let i = 0; i < districts.length; i++) {
              var config = {
                name: "",
                zooms: [4, 13],
                zIndex: 1,
                opacity: 1,
                text: {
                  content: "",
                  direction: "center",
                  offset: [0, 0],
                  zooms: [3, 20],
                  style: {
                    fontSize: 12,
                    fontWeight: "normal",
                    fillColor: "#fff",
                    strokeColor: "#fff",
                    strokeWidth: 1,
                  },
                },
              };
 
              var district = districts[i];
              var name = district.name;
 
              config.text.content = name;
              config.position = [district.center.lng, district.center.lat];
 
              LabelsData.push(config);
 
              var district2 = new AMap.DistrictSearch({
                extensions: "all",
                level: "city",
              });
 
              district2.search(name, function (status, result) {
                var bounds = result.districtList[0].boundaries;
 
                for (var ii = 0; ii < bounds.length; ii++) {
                  new AMap.Polyline({
                    map: map,
                    path: bounds[ii],
                    strokeColor: "#E7D8BC",
                    strokeWeight: 2,
                  });
                }
              });
            }
 
            for (let i = 0; i < bounds.length; i++) {
              new AMap.Polyline({
                map: map,
                path: bounds[i],
                strokeColor: "#E7D8BC",
                strokeWeight: 6,
              });
            }
 
            map.on("complete", function () {
              var layer = new AMap.LabelsLayer({
                collision: false,
                animation: true,
              });
 
              for (var i = 0; i < LabelsData.length; i++) {
                var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
                layer.add(labelsMarker);
              }
              map.add(layer);
              document.getElementsByClassName(
                "amap-container"
              )[0].style.background = "none";
            });
          });
        }
      );
    },
  },
 
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
 
    // const mapContainer = this.$refs.mapData;
    // console.log(mapContainer);
    // const map = new Map({
    //   layers: mapconfig.streetmap(), //在mapconfig.js封装的
    //   // controls: [FullScreen, ScaleLine, Zoom],
    //   target: mapContainer,
    //   view: new View({
    //     projection: "EPSG:4326",
    //     center: [116.397428, 39.90923],
    //     zoom: 11,
    //   }),
    // });
    //  // 添加鼠标点击事件
    // map.on("click", this.mapClick);
    // // 添加鼠标经过事件
    // map.on("pointermove", this.mapPointerMove);
    // // 保存地图
    // this.mapData = map;
  },
};
</script>
<style scoped>
.amapBox {
  display: flex;
  justify-content: center;
  height: 500px;
  width: 100%;
  position: relative;
  top: -40px;
}
::v-deep .amap-logo {
  display: none !important;
}
::v-deep .amap-copyright {
  display: none !important;
}
 
.amap-marker-label {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: none;
  -webkit-box-shadow: 1px 2px 4px #cccccc;
  -moz-box-shadow: 1px 2px 4px #cccccc;
  box-shadow: 1px 2px 4px #cccccc;
}
</style>
复制

上述就是实现的功能，写的不好。欢迎补充。转载请标明出处，谢谢

转载请注明出处或者链接地址：https://www.qianduange.cn//article/7690.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！