1.组件代码

Bmap.vue

<!-- 离线地图 组件 -->
<template>
<div id="map" :style="style"></div>
</template> <script>
export default{
data(){
return {
style:{
width:'100%',
height:this.height + 'px'
}
}
},
props:{
height:{
type:Number,
default:736 // 默认值
},
longitude:{
type:Number,
default:114.00100
}, // 经度
latitude:{
type:Number,
default:22.61067
} // 维度
},
mounted(){
let _this = this;
/**
* 百度地图API功能
*/
let map = new BMap.Map("map",{minZoom:12,maxZoom:18});
let point = new BMap.Point(this.longitude,this.latitude);
map.centerAndZoom(point,13); // 定义一个控件类,即function
function MessageControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 10);
} // 通过JavaScript的prototype属性继承于BMap.Control
MessageControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
MessageControl.prototype.initialize = function(map){
// 创建一个DOM元素
let div = document.createElement("div");
// 设置样式
div.style.height = "50px";
div.style.width = "50px";
div.style.backgroundImage = "url('./static/img/message_map.png')";
div.style.backgroundSize = "cover";
// 绑定事件,点击一次放大两级
div.onclick = function(e) {
// 将输入值传递给父组件
_this.$emit("showSideBar",true);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
} // 创建控件
let messageCtrl = new MessageControl(); // 添加到地图当中
map.addControl(messageCtrl);
}
}
</script>

2.效果图

百度地图 创建 自定义控件(vue)的更多相关文章

  1. Vue系列:如何将百度地图包装成Vue的组件

    主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...

  2. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  3. 百度地图JS 搜索悬浮窗功能

    这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的.文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular 效果图 ...

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

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  5. 百度地图 >> 自定义控件

    前言 百度地图API中预定义的UI控件,比如NavigationControl平移缩放控件,CopyrightControl版权控件,MapTypeControl地图类型控件....,这些都继承自抽象 ...

  6. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

  7. Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置

    整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type=& ...

  8. vue使用百度地图

    1.在百度地图申请密钥:http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http:// ...

  9. 百度地图api添加自定义控件

    官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...

随机推荐

  1. loadrunner参数化数据分配方法

    数据分配方法: 在“Select next row“列表中选择一个数据分配方法,以指示在Vuser脚本执行期间如何从参数文件中取得数据.选项包括”Sequential“.“Random”.“Uniqu ...

  2. python - web自动化测试 - 文件上传操作

    # 12. 上传操作## (1)如果是input可以直接输入路径的,直接使用send_keys输入路径# (2)非input标签的,需要借助第三方工具:# A. AutoIt : 调用其生成的au3或 ...

  3. python练手系列-分布式监控

    如果我们要写一个监控系统,要注意哪些问题和需求? [1] agent收集数据的时候需要通过系统调用少的方法收集到我们需要数据,一般来说我们优先使用python自带的系统方法,然后是读取/proc 文件 ...

  4. linux下文件显示被加锁如何解决?

    1.很多时候从别的机器上拷贝过来的文件,没有权限打开,上面有一个小锁. 2.判断是权限没有,查询ls -al得知文件的的所有者,和所有者在的组都不是本机 3.使用chown改变用户的所有者和所有者所在 ...

  5. 【bzoj2476】战场的数目 矩阵乘法优化dp

    题目描述 (战场定义为对于最高的一列向两边都严格不增的“用积木搭成”的图形) 输入 输入文件最多包含25组测试数据,每个数据仅包含一行,有一个整数p(1<=p<=109),表示战场的图形周 ...

  6. bzoj4717 改装 模拟+二分

    Description [题目背景] 小Q最近喜欢上了一款游戏,名为<舰队connection>,在游戏中,小Q指挥强大的舰队南征北战,从而成为了一名dalao.在游戏中,不仅船只能力很重 ...

  7. Django自定义User模型和登录验证

    用户表已存在(与其他App共用),不能再使用Django内置的User模型和默认的登录认证.但是还想使用Django的认证框架(真的很方便啊). 两个步骤: 1)自定义Use模型,为了区分系统的Use ...

  8. element-ui复合型输入框的显示问题

    按照官方文档那样发现,最左边的选择器里面的字显示不出来,解决方法是在为el-select设置宽度,就可以正常显示了

  9. 开源 project

    移动:http://www.csdn.net/article/2014-04-22/2819435-facebook-mobile-open-source-projects/1

  10. C语言实验设计

    一.实验题目,设计思路,实现方法 7-4 计算分段函数[2](10 分) 本题目要求计算下列分段函数f(x)的值: 注:可在头文件中包含math.h,并调用sqrt函数求平方根,调用pow函数求幂. ...