先看效果图
再来看代码,代码的话,将这个地图封装成了组件,复制过去要看下父子传值问题那些,搞定之后可直接用(其中有注解可以便于理解)
<template>
<div id="mapMain">
<a-row type="flex" justify="start" :gutter="24">
<a-col>
<a-button type="primary" @click="toggle('polygonPath')">{
{ polygonPath.editing ? '重新绘制' : '开始绘制' }}</a-button>
</a-col>
<a-col>
<a-button type="primary" @click="polygonPath.editing=true">编辑</a-button>
</a-col>
<a-col>
<a-button type="primary" @click="save">保存</a-button>
</a-col>
<a-col>
<a-input placeholder="请输入地址来直接查找相关位置" v-model="addressKeyword" maxLength= 18 style="width:250px"/>
</a-col>
</a-row>
<!-- ditu -->
<baidu-map
:map-click="false"
@click="drawLine"
class="bmView"
:scroll-wheel-zoom="true"
@ready="handler"
:center="center"
style="height: 450px;margin-top:10px"
:zoom="zoom"
>
<