Baiduの地図描画ポリゴンと組み合わせるVUE

まず、百度地図をインストールします

海の景色-にBaiduのあなたのページが-しますNPMのためにインストールマップ- 保存
 // huo_zheの 
糸に海の景色のためにインストールするには、あなたのページの意志をBaiduのマップ

main.jsで第二に、参照

BMAPのインポートから ' VUE-Baiduの-地図' 

Vue.use（BaiduMap、{ 
  // AKは、Baiduのマップアプリケーションであるキー開発プラットフォームが参照されhttp://lbsyun.baidu.com/apiconsole/key * / 
  AK：' YOUR_APP_KEY ' 
}）

第三に、特定のバーコードを見て

  1  < テンプレート> 
  2    < DIV クラス= "mapbox" > 
  3      < 百度マップ
   4        ：中央= "センター" 
  5        ：ズーム= "ズーム" 
  6        ：地図クリック= "false"を
  7        @mousemove = "syncPolygon" 
  8        @準備= "ハンドラ" 
  9        スタイル= "高さ：800ピクセル" 
10        @click = "paintPolygon" 
11        @rightclick = "newPolygon" 
12      >
13        < BM-ポリゴン
 14         ：パス= "パス" 
15          V-ため= "polygonPath.pathsのパス" 
16          キー：= "path.toString（）" 
17          ストローク色= "青" 
18          塗りつぶし色"赤" = 
19          ：フィル不透明= "0.8" 
20          ：ストローク不透明= "0.5" 
21          ：ストローク量= "2" 
22          @click = "alertpath" 
23        /> 
24        < BM-制御> 
25          < ボタン@click = "トグル（」polygonPath '）」 >{{ '描画停止' PolygonPath.editing：？} '描画を開始'} </ ボタン> 
26れる       </ BM-コントロール> 
27      </ 百度-地図> 
28    </ divの> 
29  </ テンプレート> 
30  
31である < スクリプト> 
32  エクスポートデフォルト{
 33がある   名：' ポリゴン' 、
 34は、   データ（）{
 35      リターン{
 36        ：母' 百度マップ' 、
 37        センター{LNG：116.412732 、LAT：39.911707 }、
 38は       ズーム：13であり、
 39        {：polygonPath
 40          編集：falseに、
 41は         パス：[] // トリガがクリックされたときので絵は、動的プッシュ事実にあるときに図の緯度と経度は、完了しましたpaintPolygon関数
42である       }
 43である     }
 44である   }、
 45    マウント：関数（）{
 46である   }、
 47の   方法：{
 48      ハンドラ（{BMAPマップ}）{
 49        にconsole.log（BMAPマップ）
 50        map.enableScrollWheelZoom（trueに）
 51である       。// あるmap.centerAndZoom（ '青島'、13）
であり、52      }
 53で     getClickInfo（E）{
 54である       にconsole.log（e.point.lng）
 55        にconsole.log（e.point.lat）
 56であり     、}
 57      // レンダリングオープンポリゴン
58      トグル（名）{
 59        本[名前] .editingを=  ！この[名前] .editing
 60        // パスオープンドローがある場合は、ステップを決定し、ここで行うと、古いパスを入れて空
61がある       のIF （この.polygonPath.paths &&  この.polygonPath.editing）{
 62であり         、これは.polygonPath.paths = []
 63        }
 64      }
 65      // 鼠标移动时
66      syncPolygon（E）{
 67        であれば（！この.polygonPath.editing）{
 68          リターン
69        }
 70        のconst {パス} =  この.polygonPath
 71        もし（！paths.length）{
 72          リターン
73        }
 74        CONSTパス= パス[paths.length -  1 ]
 75        もし（！Path.length）{
 76          リターン
77        }
 78        IF （path.length ===  1 ）{
 79          path.push（e.point）
 80        }
 81        本の$ SET（パス、path.length。-  。1 、E.ポイント）
 82      }、
 83      // マウスの左ボタンは、パスポイントプッシュするクリックする
84      newPolygon（E）{
 85        Ifは（！この.polygonPath.editing）{
 86          リターン
87        }
 88        // 転送ボタンが描画を開始しますバック、状態を描画開始し、複数のグラフィックスレンダリングを防ぐために
89        本[ ' polygonPath ' ] .editing =  ！この[ ' polygonPath ' ] .editing
 90        のconst {パス} =  この.polygonPath
 91        であれば（！{paths.length）
 92          paths.push（[]）
 93        }
 94        CONSTパス= パス[paths.length -  1 ]
 95        パス.pop（）
 96        であれば（path.length）{
 97          paths.push（[]）
 98       }
 99      }
 100      // 右ポリゴンレンダリングが完了し
101      paintPolygon（E）{
 102        IF （！この.polygonPath.editing）{
 103          リターン
104        }
 105        CONST} {パス=  この.polygonPath
 106        ！Paths.length && パスを。プッシュ（[]）
 107        パス[paths.length -  1 ] .push（e.point）
 108      }、
 109      alertpath（E）{
 110        はconsole.log（e.currentTarget.so）
 111       console.log（この.polygonPath.paths [ 0 ]）
 112      }
 113    }
 114  }