vuebaidumap 删除覆盖物_百度地图API示例：使用vue添加删除覆盖物

1、index.html

2、vue组件，HTML部分

添加

删除全部

删除折线

删除圆

3、vue组件，JS部分

export default {

data() {

return {}

},

methods: {

_getMapData() {

let map = new BMap.Map("firePowerMap"); // 创建Map实例

let point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

map.setCurrentCity("北京"); // 地图显示的城市

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

window.map = map;//将map变量存储在全局

},

insertShroud() {

var polyline = new BMap.Polyline([

new BMap.Point(116.399, 39.910),//定义折线第一个点

new BMap.Point(116.405, 39.920),//定义折线第二个点

new BMap.Point(116.425, 39.900),//定义折线第三个点

new BMap.Point(116.430, 39.918)//定义折线第四个点

], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}); //创建折线

//参数：颜色，线的宽度，线的透明度

map.addOverlay(polyline);

window.polyline = polyline;//将折线储存在全局

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点

map.addOverlay(marker);

var point = new BMap.Point(116.404, 39.915);

var circle = new BMap.Circle(point, 100, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建圆

map.addOverlay(circle);

window.circle = circle;//将圆储存在全局

var polygon = new BMap.Polygon([

new BMap.Point(116.387112, 39.920977),//定义多边形第一个点

new BMap.Point(116.385243, 39.913063),//定义多边形第二个点

new BMap.Point(116.394226, 39.917988),//定义多边形第三个点

new BMap.Point(116.401772, 39.921364),//定义多边形第四个点

new BMap.Point(116.412482, 39.927893),//定义多边形第五个点

], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建多边形

map.addOverlay(polygon);

},

deleteAll() {

map.clearOverlays();//删除全部

},

deletePolyline() {

polyline.clearOverlays();//删除折线

},

deleteCircle() {

circle.clearOverlays();//删除圆

},

},

mounted() {

this._getMapData();

}

}

百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别

百度地图API示例之添加定位相关控件

代码

百度地图API示例之添加自定义控件

代码

百度地图API示例之设置地图显示范围

代码

百度地图API 循环向 marker 添加 click事件

使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...

百度地图API示例之移动地图

级别为6 级别为8 级别为12 代码:

百度地图API示例之设置地图最大、最小级别

代码

百度地图API示例之文本标注

代码

随机推荐

cocos2dx 做test遇到一个问题，记录下来

我新建了一个group,然后再group里面创建一个文件A.h,再A.h中#include group同一级的文件CBaseTest.h,方法是: #include "../BaseTest ...

IOS图片缩放

1.自动缩放到指定大小 + (UIImage *)thumbnailWithImage:(UIImage *)image size:(CGSize)asize { UIImage *newimage; ...

jquery批量设置属性readonly和disabled

分享下Jquery的api中对元素应用disabled和readonly属性的方法. 1,readonly 属性设置 $('input').attr("readonly",&quo ...

设计模式之开篇(C#语法)

很长时间没有写文章了,前段时间写的C#语法糖分享得到有很多朋友支持,这个也使得我有信心继续分享下去,在这里非常感谢大家!这次开始给大家分享一下设计模式,我个人觉得设计模式也对于我们提高个人技术水平来说 ...

android环境下解决java.io.IOException: Malformed ipv6异常的方法

今天做客户端想服务端提交信息的时候,报出了如标题所显示的方法 方法以及参数如下: 输入的参数为:http://192.168.1.173:8080/Api/petinfo/petinfo?flag=a ...

深入理解CPU和异构计算芯片GPU/FPGA/ASIC (上篇)

王玉伟,腾讯TEG架构平台部平台开发中心基础研发组资深工程师,专注于为数据中心提供高效的异构加速云解决方案.目前,FPGA已在腾讯海量图片处理以及检测领域已规模上线. 随着互联网用户的快速增长,数据体 ...

nginx中支持.htaccess并禁止php在特定目录无法运行

在nginx.conf中的server里面 include /yjdata/www/thinkphp/.htaccess; 在对应的目录下面创建.htaccess,并填写以下内容,(image是跟目下 ...

Chapter 4 Invitations——17

"Then why —"He shrugged. "I was hoping you were just letting him down easy." “这为 ...

MapReduce-提交job源码分析

MapReduce-提交job源码分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.环境准备 1>.顺手的IDE,大家可以根据自己的喜好选择你喜欢的IDE 博主推荐以下 ...

firedac调用ORACLE的存储过程