地図上にマウスで描画
必要
new BMapLib.DrawingManager ツールを使用して、マップ上に点、線、領域を描画します
技術的なポイント
公式 Web サイトのアドレス: JavaScript API - クイック スタート | Baidu Map API SDK
開発ドキュメント: Baidu Map JSAPI 3.0 クラス リファレンス
成し遂げる
ステップ 1: パブリックの Index.html に導入します。
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>
<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js" type="text/javascript"></script>
<link href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" rel="stylesheet" />
ステップ 2: コンポーネントで使用する
<template>
<div>
<div id="map"></div>
<div id="result">
<el-button @click="clear()">清除覆盖物</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
drawingManager: null,
overlays: []
};
},
mounted() {
this.map = new BMap.Map("map");
this.map.centerAndZoom(new BMap.Point(117.06 ,36.67), 17);
this.map.enableScrollWheelZoom();
this.map.enableMapClick = false; // 底图不可以点击
//实例化鼠标绘制工具
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' //边线的样式,solid或dashed。
}
this.drawingManager = new BMapLib.DrawingManager(this.map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes : [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYGON] // 可见的操作选项
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件,用于获取绘制结果
this.drawingManager.addEventListener('overlaycomplete', this.complete);
},
methods: {
// 绘制完成
complete(e) {
this.overlays.push(e.overlay);
},
// 清除所有覆盖物
clear() {
// var overLayers = this.map.getOverlays();
for(var i = 0; i < this.overlays.length; i++){
this.map.removeOverlay(this.overlays[i]);
}
}
}
}
</script>
<style lang="less">
#map {
width: 300px;
height: 300px;
margin-top: 50px;
}
</style>
解析する
マウス描画グラフィックス スタイル
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' //边线的样式,solid或dashed。
}
マウス描画ツール
this.drawingManager = new BMapLib.DrawingManager(this.map, {
isOpen: false, //是否开启绘制模式
circleOptions: styleOptions, //圆的样式
});
マウスの描画が完了しました
this.drawingManager.addEventListener('overlaycomplete', this.complete);
// 绘制完成
complete(e) {
this.overlays.push(e.overlay);
},
クリアマルチ
<div id="result">
<el-button @click="clear()">清除覆盖物</el-button>
</div>
clear() {
// var overLayers = this.map.getOverlays();
for(var i = 0; i < this.overlays.length; i++){
this.map.removeOverlay(this.overlays[i]);
}
}