Baidu Map API Example: Add Delete Overlay

1, index.html

<type= "Text/javascript"  src= "http://api.map.baidu.com/api?v=2.0 &ak= your Key "></script>

2. Vue component, HTML part

<Template>  <Divclass= "FirePower">    <DivID= "Firepowermap"></Div>    <Div>      <Button@click= "Insertshroud">Add to</Button>      <Button@click= "DeleteAll">Delete all</Button>      <Button@click= "Deletepolyline">Delete polyline</Button>      <Button@click= "Deletecircle">Delete a circle</Button>    </Div>  </Div></Template>

3. Vue component, JS part

1Exportdefault {2 data () {3       return {}4     },5 methods: {6 _getmapdata () {7Let map =NewBmap.map ("Firepowermap");//Create a Map instance8Let point =NewBmap.point (116.404, 39.915);9Map.centerandzoom (Point, 15);TenMap.setcurrentcity ("Beijing");//map shows the city OneMap.enablescrollwheelzoom (true);//Turn on mouse wheel zoom AWindow.map = map;//store the map variable in the global -       }, - Insertshroud () { the         varPolyline =NewBmap.polyline ([ -           NewBmap.point (116.399, 39.910),//defining the first point of a polyline -           NewBmap.point (116.405, 39.920),//defining the second point of a polyline -           NewBmap.point (116.425, 39.900),//defining the third point of a polyline +           NewBmap.point (116.430, 39.918)//defining the fourth point of a polyline -], {strokecolor: "Red", Strokeweight:1, strokeopacity:1});//Create Polyline +         //Parameters: Color, width of line, transparency of lines A Map.addoverlay (polyline); at         varMarker =NewBmap.marker (NewBmap.point (116.404, 39.915));//Create Point - Map.addoverlay (marker); -         varPoint =NewBmap.point (116.404, 39.915); -         varCircle =NewBmap.circle (point,100,{strokecolor: "Blue", Strokeweight:2, strokeopacity:0.5});//Create a circle - Map.addoverlay (circle); -         varPolygon =NewBmap.polygon ([ in           NewBmap.point (116.387112,39.920977),//defining the first point of a polygon -           NewBmap.point (116.385243,39.913063),//defining the second point of a polygon to           NewBmap.point (116.394226,39.917988),//defining the third point of a polygon +           NewBmap.point (116.401772,39.921364),//defining the fourth point of a polygon -           NewBmap.point (116.412482,39.927893),//defining the fifth point of a polygon the], {strokecolor: "Blue", Strokeweight:2, strokeopacity:0.5});//Creating polygons * Map.addoverlay (polygon); $       },Panax Notoginseng DeleteAll () { -Map.clearoverlays ();//Delete all the       }, + Deletepolyline () { A         //Delete polyline the       }, + deletecircle () { -         //Delete a circle $       }, $     }, - mounted () { -        This. _getmapdata (); the     } -}

Baidu Map API Example: Add Delete Overlay