devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue项目中如何使用百度地图_vue-百度map

作者：IT小白 | 2024-02-18 19:07:33

赞

踩

vue-百度map

api 参考  JSAPI类参考

两种使用方式：vue特定的VueBaiduMap /原生js

第一种使用 Vue Baidu Map

网址：Vue Baidu Map

实例如下

  1. <comment>
  2.  
  3. </comment>
  4. <template>
  5.   <div id="Map">
  6.     <baidu-map
  7.       class="bMap"
  8.       :center="mainData.city"
  9.       :zoom="mainData.zoom"
  10.       @ready="initMap"
  11.       :mapStyle="mapStyle"
  12.       :scroll-wheel-zoom="true"
  13.       ak=""
  14.     >
  15.       <bm-map-type
  16.         :map-types="['BMAP_NORMAL_MAP', 'BMAP_SATELLITE_MAP']"
  17.         anchor="BMAP_ANCHOR_TOP_RIGHT"
  18.       ></bm-map-type>
  19.      <!--  :icon="{url: item.projectAlertState === 0 ? require('../../assets/image/emergency/markImgOutline.png') :  item.projectAlertState === 1 ? require('../../assets/image/emergency/markImgOnline.png') : require('../../assets/image/emergency/markImgAlart.png') , size: {width: 58, height: 62}}" -->
  20.       <bm-marker
  21.         v-for="(item,index) in pointsListTest"
  22.         :title="item.name"
  23.         :key="'point'+index"
  24.         :position="{lng: item.lng, lat: item.lat}"
  25.         @click="markClick($event,item)"
  26.       ></bm-marker>
  27.       <!-- <bm-polyline
  28.         v-for="(item,index) in polylinePath"
  29.         :key="index"
  30.         :path="item"
  31.         :strokeColor="index%2==0?'#e6a23c':'#f56c6c'"
  32.         :strokeOpacity="1"
  33.         :strokeWeight="1.5"
  34.       ></bm-polyline> -->
  35.       <!-- <bm-info-window
  36.         v-for="(item,index) in pointsList"
  37.         :key="'modal'+index"
  38.         :position="{lng: item.lng, lat: item.lat}"
  39.         :offset="{height:-20,width:-3}"
  40.         :show="currentPointId==item.id"
  41.         @close="currentPointId=''"
  42.       >
  43.         <div style="padding:10px 0">
  44.           <p style="margin:5px 0;margin-bottom:15px;">项目名称：{{item.name}}</p>
  45.           <p style="text-align:right">
  47.           <span class="btn" @click="showDetail(item.id)">查看详情</span>
  48.           </p>
  49.         </div>
  50.       </bm-info-window>-->
  51.       <!-- <bm-boundary
  52.         name="广州南沙区"
  53.         :strokeWeight="3"
  54.         strokeColor="#FFFFFF"
  55.         :fillOpacity="0.2"
  56.         fillColor="#FFFFFF"
  57.       ></bm-boundary>-->
  58.     </baidu-map>
  59.     <div class="modalContainer" v-if="visible" @click="visible=!visible">
  60.       <div class="modal">
  61.         <div class="modal-title">
  62.           <span>详情</span>
  63.           <span class="icon" @click.stop="visible=false">
  64.             <i class="el-icon-error"></i>
  65.           </span>
  66.         </div>
  67.         <div class="modal-body">
  68.           <table>
  69.             <tr>
  70.               <td style="width:75px;">项目名称：</td>
  71.               <td>{{modalData.name}}</td>
  72.             </tr>
  73.           </table>
  74.         </div>
  75.         <div class="modal-footer">
  76.           <span class="btn" @click.stop="showDetail(modalData.id)">查看详情</span>
  77.         </div>
  78.       </div>
  79.     </div>
  80.   </div>
  81. </template>
  82.  
  83. <script>
  84. import BaiduMap from "vue-baidu-map/components/map/Map.vue"; //百度地图接入
  85. // import { BmlMarkerClusterer } from "vue-baidu-map";
  86. import { BmMarker } from "vue-baidu-map"; //百度地图 撒点
  87. import { BmBoundary } from "vue-baidu-map"; //屏蔽层
  88. import { BmMapType } from "vue-baidu-map"; //地图类型控件  普通图、卫星图、卫星加路网混合图和三维图
  89. import { BmInfoWindow } from "vue-baidu-map"; //地图类型控件  普通图、卫星图、卫星加路网混合图和三维图
  90. import { BmPolyline } from "vue-baidu-map"; //线段
  91.  
  92. export default {
  93.   name: "Map",
  94.   components: {
  95.     BaiduMap,
  96.     // BmlMarkerClusterer,
  97.     BmMarker, //标记点
  98.     BmBoundary, //屏蔽层
  99.     BmMapType, //地图类型控件
  100.     BmInfoWindow, //信息窗体-弹出框
  101.     BmPolyline //线段
  102.   },
  103.   data() {
  104.     return {
  105.       //地图主题样式
  106.       mapStyle: {
  107.         // styleJson: [
  108.         //   {
  109.         //     featureType: "all",
  110.         //     elementType: "geometry",
  111.         //     stylers: {
  112.         //       hue: "#091143",
  113.         //       saturation: 100
  114.         //     }
  115.         //   },
  116.         //   {
  117.         //     featureType: "water",
  118.         //     elementType: "all",
  119.         //     stylers: {
  120.         //       color: "#ffffff"
  121.         //     }
  122.         //   }
  123.         // ],
  124.         style: "midnight"
  125.       },
  126.       visible: false,
  127.       modalData: {
  128.         name: "",
  129.         id: ""
  130.       },
  131.       BMap: null,
  132.       map: null,
  133.       blist: [],
  134.       districtLoading: 0,
  135.       // 项目标点
  136.       itemPoints: [],
  137.       mainData :{
  138.         city: { lng: 113.531, lat: 22.7046 },
  139.         zoom: 11
  140.       },
  141.       currentPointId: "",
  142.       pointsList: [],
  143.       pointsListTest: [
  144.         {
  145.           name: "中铁十六局",
  146.           id: "936",
  147.           lng: "113.3484484793",
  148.           lat: "22.845750655",
  149.           status: "2",
  150.           progress: "1",
  151.           type: 5,
  152.           zoom: 0,
  153.           danger_list: [
  154.             { color: "#ff0000", count: "1" },
  155.             { color: "#0080ff", count: "4" }
  156.           ],
  157.           danger_count: 5
  158.         },
  159.         {
  160.           name: "中铁二局",
  161.           id: "936",
  162.           lng: "113.5602469939",
  163.           lat: "22.8256307025",
  164.           status: "2",
  165.           progress: "1",
  166.           type: 5,
  167.           zoom: 0,
  168.           danger_list: [
  169.             { color: "#ff0000", count: "1" },
  170.             { color: "#0080ff", count: "4" }
  171.           ],
  172.           danger_count: 5
  173.         },
  174.         {
  175.           name: "中水利十四局",
  176.           id: "936",
  177.           lng: "113.403522605",
  178.           lat: "22.8079118286",
  179.           status: "2",
  180.           progress: "1",
  181.           type: 5,
  182.           zoom: 0,
  183.           danger_list: [
  184.             { color: "#ff0000", count: "1" },
  185.             { color: "#0080ff", count: "4" }
  186.           ],
  187.           danger_count: 5
  188.         },
  189.         {
  190.           name: "中铁隧道局",
  191.           id: "936",
  192.           lng: "113.4938821223",
  193.           lat: "22.7813844663",
  194.           status: "2",
  195.           progress: "1",
  196.           type: 5,
  197.           zoom: 0,
  198.           danger_list: [
  199.             { color: "#ff0000", count: "1" },
  200.             { color: "#0080ff", count: "4" }
  201.           ],
  202.           danger_count: 5
  203.         },
  204.         {
  205.           name: "广东水电三局",
  206.           id: "936",
  207.           lng: "113.6039728703",
  208.           lat: "22.659178119",
  209.           status: "2",
  210.           progress: "1",
  211.           type: 5,
  212.           zoom: 0,
  213.           danger_list: [
  214.             { color: "#ff0000", count: "1" },
  215.             { color: "#0080ff", count: "4" }
  216.           ],
  217.           danger_count: 5
  218.         },
  219.         {
  220.           name: "广东水电二局",
  221.           id: "936",
  222.           lng: "113.5582922075",
  223.           lat: "22.7981686582",
  224.           status: "2",
  225.           progress: "1",
  226.           type: 5,
  227.           zoom: 0,
  228.           danger_list: [
  229.             { color: "#ff0000", count: "1" },
  230.             { color: "#0080ff", count: "4" }
  231.           ],
  232.           danger_count: 5
  233.         }
  234.       ],
  235.       polylinePath: [
  236.         [
  237.           { lng: "113.5582922075", lat: "22.7981686582" },
  238.           { lng: "113.6039728703", lat: "22.659178119" }
  239.         ],
  240.         [
  241.           { lng: "113.4938821223", lat: "22.7813844663" },
  242.           { lng: "113.403522605", lat: "22.8079118286" }
  243.         ]
  244.       ]
  245.     };
  246.   },
  247.   computed: {},
  248.   created() {
  249.   },
  250.   mounted() {
  251.     //this.getOrgInfo();
  252.   },
  253.   watch: {
  254.     // 标记撒点监听
  255.   },
  256.   methods: {
  257.     // 地图init
  258.     initMap({ BMap, map }) {
  259.       // console.log(BMap, map);
  260.       this.BMap = BMap;
  261.       this.map = map;
  262.       this.blist = [];
  263.       //画线
  264.       //this.drawLine();
  265.       //行政区域增加屏蔽层
  266.       this.addDistrict("广州南沙区");
  267.       
  268.     },
  269.     //请求后台数据
  270.     getOrgInfo() {
  271.       //let url = window.location.search;
  272.       // if(url){
  273.       //     sessionStorage.setItem('token',url.substr(1));
  274.       // }else{
  275.       //     let token = sessionStorage.getItem('token');
  276.       //     if(!token){
  277.       //         this.$message.error('系统异常，详情请联系管理员');
  278.       //         return ;
  279.       //     }
  280.       // }
  281.       sessionStorage.setItem("token", "f181c937130fdee4ed38a20819e27190");
  282.       let aa = new FormData();
  283.       aa.set("token", this.$Api.gettoken("token"));
  284.       aa.set("level", "5");
  285.       this.$Api.post("App/ProjectExtra/get_area_info", aa).then(success => {
  286.         if (success.data.code == "0") {
  287.           this.pointsList = success.data.data;
  288.           //地图相关
  289.         } else {
  290.           //this.$Api.message('商品获取失败', 'error');
  291.         }
  292.       });
  293.     },
  294.     //地图标记点的点击事件
  295.     markClick(e, item) {
  296.       this.visible = true;
  297.       this.modalData = item;
  298.       //this.currentPointId = id;
  299.     },
  300.     // 点击“查看详情”按钮
  301.     showDetail(id) {
  302.       let _href = window.location.host;
  303.       if (_href.indexOf("autobuild") != -1) {
  304.         window.open(
  305.           "http://autobuild.1357.cn/Admin/SmartScreen/index?access_org_id=" +
  306.             id,
  307.           "_blank"
  308.         );
  309.       } else if (_href.indexOf("spm") != -1) {
  310.         window.open(
  311.           "http://spm.1357.cn/Admin/SmartScreen/index?access_org_id=" + id,
  312.           "_blank"
  313.         );
  314.       }
  315.     },
  316.     drawLine() {
  317.       var sy = new this.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
  318.         scale: 0.4, //图标缩放大小
  319.         strokeColor: "#fff", //设置矢量图标的线填充颜色
  320.         strokeWeight: "1.5" //设置线宽
  321.       });
  322.       var icons = new this.BMap.IconSequence(sy, "10", "30");
  323.       // 创建polyline对象
  324.       var pois = [
  325.         new this.BMap.Point(113.5582922075, 22.7981686582),
  326.         new this.BMap.Point(113.6039728703, 22.659178119)
  327.       ];
  328.       var polyline = new this.BMap.Polyline(pois, {
  329.         enableEditing: false, //是否启用线编辑，默认为false
  330.         enableClicking: true, //是否响应点击事件，默认为true
  331.         icons: [icons],
  332.         strokeWeight: "2", //折线的宽度，以像素为单位
  333.         strokeOpacity: 1, //折线的透明度，取值范围0 - 1
  334.         strokeColor: "#67c23a" //折线颜色
  335.       });
  336.       this.map.addOverlay(polyline);
  337.     },
  338.     /**
  339.      * 以下方法全都是为了给“广州南沙区增加屏蔽层”
  340.      */
  341.     addDistrict(districtName) {
  342.       //使用计数器来控制加载过程
  343.       this.districtLoading++;
  344.       var bdary = new this.BMap.Boundary();
  345.       bdary.get(districtName, rs => {
  346.         //获取行政区域
  347.         var count = rs.boundaries.length; //行政区域的点有多少个
  348.         if (count === 0) {
  349.           alert("未能获取当前输入行政区域");
  350.           return;
  351.         }
  352.         for (let i = 0; i < count; i++) {
  353.           this.blist.push({ points: rs.boundaries[i], name: districtName });
  354.         }
  355.         //加载完成区域点后计数器-1
  356.         this.districtLoading--;
  357.         if (this.districtLoading == 0) {
  358.           //全加载完成后画端点
  359.           this.drawBoundary();
  360.         }
  361.       });
  362.     },
  363.     //反选行政区
  364.     drawBoundary() {
  365.       //包含所有区域的点数组
  366.       var pointArray = [];
  367.  
  368.       /*画遮蔽层的相关方法
  369.        *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
  370.        *      这样就做出了一个经过多次西北角的闭合多边形*/
  371.       //定义中国东南西北端点，作为第一层
  372.       var pNW = { lat: 59.0, lng: 73.0 };
  373.       var pNE = { lat: 59.0, lng: 136.0 };
  374.       var pSE = { lat: 3.0, lng: 136.0 };
  375.       var pSW = { lat: 3.0, lng: 73.0 };
  376.       //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
  377.       var pArray = [];
  378.       pArray.push(pNW);
  379.       pArray.push(pSW);
  380.       pArray.push(pSE);
  381.       pArray.push(pNE);
  382.       pArray.push(pNW);
  383.       //循环添加各闭合区域
  384.       for (var i = 0; i < this.blist.length; i++) {
  385.         //添加显示用标签层
  386.         var label = new this.BMap.Label(this.blist[i].name, {
  387.           offset: new this.BMap.Size(20, -10)
  388.         });
  389.         label.hide();
  390.         this.map.addOverlay(label);
  391.  
  392.         //添加多边形层并显示
  393.         var ply = new this.BMap.Polygon(this.blist[i].points, {
  394.           strokeWeight: 4,
  395.           strokeColor: "#ffffff",
  396.           fillOpacity: 0.01,
  397.           fillColor: " #FFFFFF"
  398.         }); //建立多边形覆盖物
  399.         // ply.name = this.blist[i].name;
  400.         // ply.label = label;
  401.         this.map.addOverlay(ply);
  402.  
  403.         //添加名称标签层
  404.         // var centerlabel = new this.Label(this.blist[i].name, { offset: new this.BMap.Size(0, 0) });
  405.         // centerlabel.setPosition(ply.getBounds().getCenter());
  406.         // this.map.addOverlay(centerlabel);
  407.  
  408.         //将点增加到视野范围内
  409.         var path = ply.getPath();
  410.         pointArray = pointArray.concat(path);
  411.         //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
  412.         pArray = pArray.concat(path);
  413.         pArray.push(pArray[0]);
  414.       }
  415.  
  416.       //限定显示区域，需要引用api库
  417.       // var boundply = new this.BMap.Polygon(pointArray);
  418.       // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
  419.       // this.map.setViewport(pointArray);    //调整视野
  420.  
  421.       //添加遮蔽层
  422.       var plyall = new this.BMap.Polygon(pArray, {
  423.         strokeOpacity: 0.0000001,
  424.         strokeColor: "#000000",
  425.         strokeWeight: 0.00001,
  426.         fillColor: "rgba(26, 35, 42, 1)",
  427.         fillOpacity: 0.5
  428.       }); //建立多边形覆盖物
  429.       this.map.addOverlay(plyall);
  430.     }
  431.   },
  432.   destroyed() {}
  433. };
  434. </script>
  435.  
  436. <style lang="scss">
  437. #Map {
  438.   height: 100%;
  439.   position: relative;
  440.   .anchorBL {
  441.     display: none;
  442.   }
  443.   .modalContainer {
  444.     position: absolute;
  445.     top: 0;
  446.     left: 0;
  447.     width: 100%;
  448.     height: 100%;
  449.     background: rgba(0, 0, 0, 0.12);
  450.     .modal {
  451.       position: absolute;
  452.       width: 300px;
  453.       height: 150px;
  454.       top: 50%;
  455.       left: 50%;
  456.       transform: translate(-50%, -50%);
  457.       background-image: url("../../assets/imgs/modal_bg.png");
  458.       background-color: rgba(0, 0, 0, 0.12);
  459.       background-repeat: no-repeat;
  460.       background-size: 100% 100%;
  461.       background-position: center center;
  462.       color: rgba(255, 255, 255, 0.8);
  463.       table {
  464.         tr {
  465.           td {
  466.             vertical-align: top;
  467.           }
  468.         }
  469.       }
  470.       z-index: 10;
  471.       .modal-title {
  472.         display: flex;
  473.         justify-content: space-between;
  474.         margin-top: 10px;
  475.         padding: 0px 10px;
  476.         .icon {
  477.           padding: 0px 0 10px 6px;
  478.           font-size: 16px;
  479.           color: rgba(255, 255, 255, 0.8);
  480.           cursor: pointer;
  481.         }
  482.       }
  483.       .modal-body {
  484.         padding: 5px 15px;
  485.         height: 54px;
  486.       }
  487.       .modal-footer {
  488.         padding: 5px 15px;
  489.         text-align: right;
  490.       }
  491.     }
  492.   }
  493.  
  494.   .bMap {
  495.     width: 100%;
  496.     height: 100%;
  497.   }
  498.   .BMap_pop {
  499.     div {
  500.     }
  501.   }
  502.   .BMap_pop div,
  503.   .BMap_pop .BMap_center,
  504.   .BMap_pop .BMap_top,
  505.   .BMap_pop .BMap_bottom {
  506.     border: none !important;
  507.   }
  508.   .btn {
  509.     cursor: pointer;
  510.     padding: 6px 10px;
  511.     background: transparent;
  512.     text-align: center;
  513.     color: #fff;
  514.     background: rgba(28, 217, 255, 1);
  515.     border-radius: 5px;
  516.     // box-shadow: 0px 0px 30px rgba(28, 217, 255, 0.8) inset;
  517.   }
  518. }
  519. </style>

第二种：原生js

网址：地图JS API示例 | 百度地图开放平台

实例如下

  1. <template>
  2.   <!--需求描述-->
  3.   <!--公司级：南沙水务局-->
  4.  
  5.   <!--需求：参考成都倍特项目，公司级大屏地图模式下，选用广州市南沙区地图，且该地图可链接到任意一款地图中的卫星地图中，地图可进行放大缩小，地图上标定点位可以跳转到相应项目的大屏。-->
  6.  
  7.   <!--完成时间：9月29日-->
  8.   <div id="btMap">
  9.     <div id="map_main" style="height:100%;width:100%;transform: scale(1);margin-left:0px;"></div>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. var BMapLib = (window.BMapLib = BMapLib || {});
  15. var blist = [];
  16. var districtLoading = 0;
  17. window.loadJScript = function() {
  18.   var script = document.createElement("script");
  19.   script.type = "text/javascript";
  20.   script.src =
  21.     "http://api.map.baidu.com/api?v=2.0&ak=xfpEeKgg9wUnwyVAAzBEL1GRZROmAB32&callback=init";
  22.   script.id = "mapsrc";
  23.   document.body.appendChild(script);
  24. };
  25. window.showInfo = function(id) {
  26.   window.open(
  27.     window.location.host + "/Admin/SmartScreen/index?access_org_id=" + id,
  28.     "_blank"
  29.   );
  30. };
  31. export default {
  32.   name: "map",
  33.   data() {
  34.     return {
  35.       soft: [
  36.         {
  37.           name: "中铁十六局",
  38.           id: "936",
  39.           lng: "113.3484484793",
  40.           lat: "22.845750655",
  41.           status: "2",
  42.           progress: "1",
  43.           type: 5,
  44.           zoom: 0,
  45.           danger_list: [
  46.             { color: "#ff0000", count: "1" },
  47.             { color: "#0080ff", count: "4" }
  48.           ],
  49.           danger_count: 5
  50.         },
  51.         {
  52.           name: "中铁二局",
  53.           id: "936",
  54.           lng: "113.5602469939",
  55.           lat: "22.8256307025",
  56.           status: "2",
  57.           progress: "1",
  58.           type: 5,
  59.           zoom: 0,
  60.           danger_list: [
  61.             { color: "#ff0000", count: "1" },
  62.             { color: "#0080ff", count: "4" }
  63.           ],
  64.           danger_count: 5
  65.         },
  66.         {
  67.           name: "中水利十四局",
  68.           id: "936",
  69.           lng: "113.403522605",
  70.           lat: "22.8079118286",
  71.           status: "2",
  72.           progress: "1",
  73.           type: 5,
  74.           zoom: 0,
  75.           danger_list: [
  76.             { color: "#ff0000", count: "1" },
  77.             { color: "#0080ff", count: "4" }
  78.           ],
  79.           danger_count: 5
  80.         },
  81.         {
  82.           name: "中铁隧道局",
  83.           id: "936",
  84.           lng: "113.4938821223",
  85.           lat: "22.7813844663",
  86.           status: "2",
  87.           progress: "1",
  88.           type: 5,
  89.           zoom: 0,
  90.           danger_list: [
  91.             { color: "#ff0000", count: "1" },
  92.             { color: "#0080ff", count: "4" }
  93.           ],
  94.           danger_count: 5
  95.         },
  96.         {
  97.           name: "广东水电三局",
  98.           id: "936",
  99.           lng: "113.6039728703",
  100.           lat: "22.659178119",
  101.           status: "2",
  102.           progress: "1",
  103.           type: 5,
  104.           zoom: 0,
  105.           danger_list: [
  106.             { color: "#ff0000", count: "1" },
  107.             { color: "#0080ff", count: "4" }
  108.           ],
  109.           danger_count: 5
  110.         },
  111.         {
  112.           name: "广东水电二局",
  113.           id: "936",
  114.           lng: "113.5582922075",
  115.           lat: "22.7981686582",
  116.           status: "2",
  117.           progress: "1",
  118.           type: 5,
  119.           zoom: 0,
  120.           danger_list: [
  121.             { color: "#ff0000", count: "1" },
  122.             { color: "#0080ff", count: "4" }
  123.           ],
  124.           danger_count: 5
  125.         }
  126.       ]
  127.     };
  128.   },
  129.   methods: {
  130.     gdApi(allpoData) {
  131.       let that = this;
  132.       this.innerVisible = true;
  133.  
  134.       var map = "";
  135.       window.init = function() {
  136.         map = new BMap.Map("map_main", { enableMapClick: false });
  137.         // 创建Map实例
  138.         var pointer = new BMap.Point(113.531, 22.7046); //103.829313,36.073536
  139.         // var pointer = new BMap.Point(113.311118,22.481607)
  140.         that.lat = 113.311118;
  141.         that.lng = 22.481607;
  142.         map.centerAndZoom(pointer, 11);
  143.         map.enableScrollWheelZoom();
  144.         map.addControl(
  145.           new BMap.MapTypeControl({
  146.             mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]
  147.           })
  148.         );
  149.  
  150.         var plength = allpoData.length;
  151.         var allpoint = [];
  152.         var pstatus = ["未开工", "在建", "停工", "完工"];
  153.         var pjindu = ["无", "工期正常", "工期超前", "工期滞后"];
  154.         for (let i = plength; i--; ) {
  155.           let pointer1 = new BMap.Point(
  156.             parseFloat(allpoData[i].lng).toFixed(6),
  157.             parseFloat(allpoData[i].lat).toFixed(6)
  158.           );
  159.           let marker = new BMap.Marker(pointer1);
  160.           map.addOverlay(marker);
  161.           allpoint.push(pointer1);
  162.           addInfo(
  163.             `
  164.                         <div class='dotext' style='margin-top:20px;'>项目名称：${allpoData[i].name}</div><div style='text-align: right;margin-right: 14px'>
  165.                         <button style="background: #2E5893;color: #fff;border-radius: 4px;font-size: 13px;padding:2px 4px"
  166.                         onclick="showInfo(${allpoData[i].id})">查看详情
  167.                         </button></div>
  168.                         `,
  169.             marker
  170.           );
  171.         }
  172.         if (plength <= 0) {
  173.           var marker = new BMap.Marker(pointer);
  174.           map.addOverlay(marker);
  175.           allpoint.push(pointer);
  176.         }
  177.         // map.disableDragging();
  178.         map.disableDoubleClickZoom();
  179.         //赋值经纬度
  180.         // that.lat = 113.3110;
  181.         // that.lng = 22.4816;
  182.         var size = new BMap.Size(10, 20);
  183.         var mapStyle = { style: "midnight" };
  184.         map.setMapStyle(mapStyle);
  185.         setTimeout(function() {
  186.           getBoundary();
  187.         }, 0);
  188.       };
  189.       function getBoundary() {
  190.         blist = [];
  191.         addDistrict("广州南沙区");
  192.       }
  193.       function addDistrict(districtName) {
  194.         //使用计数器来控制加载过程
  195.         districtLoading++;
  196.         var bdary = new BMap.Boundary();
  197.         bdary.get(districtName, function(rs) {
  198.           //获取行政区域
  199.           var count = rs.boundaries.length; //行政区域的点有多少个
  200.           if (count === 0) {
  201.             alert("未能获取当前输入行政区域");
  202.             return;
  203.           }
  204.           for (var i = 0; i < count; i++) {
  205.             blist.push({ points: rs.boundaries[i], name: districtName });
  206.           }
  207.           //加载完成区域点后计数器-1
  208.           districtLoading--;
  209.           if (districtLoading == 0) {
  210.             //全加载完成后画端点
  211.             drawBoundary();
  212.           }
  213.         });
  214.       }
  215.       function drawBoundary() {
  216.         //包含所有区域的点数组
  217.         var pointArray = [];
  218.  
  219.         /*画遮蔽层的相关方法
  220.          *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
  221.          *      这样就做出了一个经过多次西北角的闭合多边形*/
  222.         //定义中国东南西北端点，作为第一层
  223.         var pNW = { lat: 59.0, lng: 73.0 };
  224.         var pNE = { lat: 59.0, lng: 136.0 };
  225.         var pSE = { lat: 3.0, lng: 136.0 };
  226.         var pSW = { lat: 3.0, lng: 73.0 };
  227.         //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
  228.         var pArray = [];
  229.         pArray.push(pNW);
  230.         pArray.push(pSW);
  231.         pArray.push(pSE);
  232.         pArray.push(pNE);
  233.         pArray.push(pNW);
  234.         //循环添加各闭合区域
  235.         for (var i = 0; i < blist.length; i++) {
  236.           //添加显示用标签层
  237.           var label = new BMap.Label(blist[i].name, {
  238.             offset: new BMap.Size(20, -10)
  239.           });
  240.           label.hide();
  241.           map.addOverlay(label);
  242.  
  243.           //添加多边形层并显示
  244.           var ply = new BMap.Polygon(blist[i].points, {
  245.             strokeWeight: 4,
  246.             strokeColor: "#ffffff",
  247.             fillOpacity: 0.01,
  248.             fillColor: " #FFFFFF"
  249.           }); //建立多边形覆盖物
  250.           // ply.name = blist[i].name;
  251.           // ply.label = label;
  252.           map.addOverlay(ply);
  253.  
  254.           //添加名称标签层
  255.           // var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
  256.           // centerlabel.setPosition(ply.getBounds().getCenter());
  257.           // map.addOverlay(centerlabel);
  258.  
  259.           //将点增加到视野范围内
  260.           var path = ply.getPath();
  261.           pointArray = pointArray.concat(path);
  262.           //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
  263.           pArray = pArray.concat(path);
  264.           pArray.push(pArray[0]);
  265.         }
  266.  
  267.         //限定显示区域，需要引用api库
  268.         // var boundply = new BMap.Polygon(pointArray);
  269.         // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
  270.         // map.setViewport(pointArray);    //调整视野
  271.  
  272.         //添加遮蔽层
  273.         var plyall = new BMap.Polygon(pArray, {
  274.           strokeOpacity: 0.0000001,
  275.           strokeColor: "#000000",
  276.           strokeWeight: 0.00001,
  277.           fillColor: "rgba(26, 35, 42, 1)",
  278.           fillOpacity: 0.5
  279.         }); //建立多边形覆盖物
  280.         map.addOverlay(plyall);
  281.       }
  282.       function addInfo(txt, marker) {
  283.         var infoWindow = new BMap.InfoWindow(txt);
  284.         infoWindow.id = "newwindow";
  285.         marker.addEventListener("click", function() {
  286.           this.openInfoWindow(infoWindow);
  287.           setTimeout(function() {
  288.             let ele = document.querySelector(
  289.               '.BMap_pop img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]'
  290.             );
  291.  
  292.             // console.log(ele.offsetLeft -15);
  293.             ele.style.left = ele.offsetLeft - 10 + "px";
  294.           }, 0);
  295.         });
  296.       }
  297.  
  298.       loadJScript();
  299.     },
  300.     getOrgInfo() {
  301.       let url = window.location.search;
  302.       if (url) {
  303.         sessionStorage.setItem("token", url.substr(1));
  304.       } else {
  305.         let token = sessionStorage.getItem("token");
  306.         if (!token) {
  307.           this.$message.error("系统异常，详情请联系管理员");
  308.           return;
  309.         }
  310.       }
  311.       let that = this;
  312.       let aa = new FormData();
  313.       aa.set("token", this.$Api.gettoken("token"));
  314.       aa.set("level", "5");
  315.       this.$Api.post("App/ProjectExtra/get_area_info", aa).then(success => {
  316.         if (success.data.code == "0") {
  317.           that.bigmapData = success.data.data;
  318.           //地图相关
  319.           that.gdApi(that.bigmapData);
  320.         } else {
  321.           //that.$Api.message('商品获取失败', 'error');
  322.         }
  323.       });
  324.     }
  325.   },
  326.   mounted() {
  327.     // this.gdApi(this.soft);
  328.     this.getOrgInfo();
  329.   },
  330.   created() {}
  331. };
  332. </script>
  333.  
  334. <style scoped>
  335. #btMap {
  336.   /*width: 740px;*/
  337.   /*height: 630px;*/
  338.   /*overflow: hidden;*/
  339.   width: 100%;
  340.   height: 100%;
  341.   background: rgba(26, 35, 42, 1);
  342. }
  343. button {
  344.   border-radius: 2px;
  345.   background: #2e5893;
  346.   color: #fff;
  347.   font-size: 14px;
  348. }
  349. </style>
  350. <style>
  351. .anchorBL {
  352.   display: none !important;
  353. }
  354. /*地图标题*/
  355. .BMap_bubble_title {
  356.   color: white;
  357.   font-size: 13px;
  358.   font-weight: bold;
  359.   text-align: left;
  360.   padding-left: 5px;
  361.   padding-top: 5px;
  362.   border-bottom: 1px solid gray;
  363.   background-color: #2756ca;
  364. }
  365. /* 消息内容 */
  366. .BMap_bubble_content {
  367.   background-color: #fff;
  368.   padding-left: 5px;
  369.   padding-top: 5px;
  370.   padding-bottom: 10px;
  371. }
  372. /* 内容 */
  373. .BMap_pop div:nth-child(9) {
  374.   top: 35px !important;
  375.   border-radius: 7px;
  376. }
  377. /* 左上角删除按键 */
  378. .BMap_pop img {
  379.   top: 43px !important;
  380.   -left: 215px !important;
  381. }
  382. .BMap_top {
  383.   display: none;
  384. }
  385. .BMap_bottom {
  386.   display: none;
  387. }
  388. .BMap_center {
  389.   display: none;
  390. }
  391. /* 隐藏边角 */
  392. .BMap_pop div:nth-child(1) div {
  393.   display: none;
  394. }
  395. .BMap_pop div:nth-child(3) {
  396.   display: none;
  397. }
  398. .BMap_pop div:nth-child(5) {
  399.   display: none;
  400. }
  401. .BMap_pop div:nth-child(7) {
  402.   display: none;
  403. }
  404. .dotext {
  405.   width: 108%;
  406.   overflow: hidden;
  407.   text-overflow: ellipsis;
  408.   white-space: nowrap;
  409.   font-size: 12px;
  410.   line-height: 1.8em;
  411.   padding: 0 5px;
  412.   display: block !important;
  413.   box-sizing: border-box;
  414. }
  415. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/109947
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号