地图工具类 gengdidi

gassafety-web/public/index.html

@@ -8,7 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor,AMap.MapType"></script>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
     <style>
     html,
     body,

gassafety-web/src/utils/gaodeMap.js

@@ -74,7 +74,7 @@ class gaodeMap {
    */
   addMarker(lnglats){
     let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
-    for (let i = 0, marker; i < lnglats.length; i++) {
+    for (let i = 0; i < lnglats.length; i++) {
       let marker = new AMap.Marker({
         position: lnglats[i],
         map: map,
@@ -161,12 +161,12 @@ class gaodeMap {
    * 添加鼠标事件
    */
   addMouseTool(){
-    var mouseTool = new AMap.MouseTool(map);
+    let mouseTool = new AMap.MouseTool(map);
     //监听draw事件可获取画好的覆盖物
-    var overlays = [];
+    let overlays = [];
     mouseTool.on('draw',function(e){
       overlays.push(e.obj);
-    })
+    });
 
     function draw(type){
       switch(type){
@@ -211,33 +211,50 @@ class gaodeMap {
       }
     }
 
-    var radios = document.getElementsByName('func');
-    for(var i=0;i<radios.length;i+=1){
+    let radios = document.getElementsByName('func');
+    for(let i=0;i<radios.length;i+=1){
       radios[i].onchange = function(e){
         draw(e.target.value)
       }
     }
-    draw('marker')
+    draw('marker');
     document.getElementById('clear').onclick = function(){
       map.remove(overlays)
       overlays = [];
     }
     document.getElementById('close').onclick = function(){
       mouseTool.close(true)//关闭，并清除覆盖物
-      for(var i=0;i<radios.length;i+=1){
+      for(let i=0;i<radios.length;i+=1){
         radios[i].checked = false;
       }
     }
   }
 
-  amapLoader(){
-    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],function(){
-      //创建并添加工具控件,上下左右移动，以及缩放
+  /**
+   * 添加地图控件
+   */
+  addMapControl(){
+    AMap.plugin([
+      'AMap.ToolBar',
+      'AMap.Scale',
+      'AMap.HawkEye',
+      'AMap.MapType',
+      'AMap.Geolocation',
+    ], function(){
+      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
       //map.addControl(new AMap.ToolBar());
+
+      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
       map.addControl(new AMap.Scale());
-      //map.addControl(new AMap.OverView({isOpen:true}))
-      map.addControl(new AMap.MapType());
-      //map.addControl(new AMap.Geolocation());
+
+      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
+      map.addControl(new AMap.HawkEye({isOpen:true}));
+
+      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
+      map.addControl(new AMap.MapType({position :{top: '10px',left: '100px'}}));
+
+      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
+     // map.addControl(new AMap.Geolocation());
     });
   }
 

gassafety-web/src/views/enterprise/map/index.vue

@@ -40,21 +40,20 @@
       gaoMap.addMarker(lnglats)
       let path = [
         [
-          [114.534792,38.022417],
-          [114.544748,38.073245],
-          [114.58114,38.066218],
-          [114.593843,38.040265]
+          [114.436698,38.083306],
+          [114.57952,38.065468],
+          [114.57952,38.002732],
+          [114.440131,38.006519],
+          [114.436698,38.083306]
         ],
         [
-          [114.508699,38.082434],
-          [114.559167,38.087298],
-          [114.628175,38.049457],
-          [114.543718,38.021605]
+          [114.528708,38.075198],
+          [114.530768,38.00165]
         ]
       ]
       gaoMap.addPolyline(path);
       gaoMap.addMouseTool();
-      gaoMap.amapLoader();
+      gaoMap.addMapControl();
     }
   };
 </script>