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的存储过程