html:

<div id="allmap" class="map"></div>

 
script:
 
mounted() {
this.ready()
},
methods: {
ready: function() {
let sContent ='<div>'+
'信息窗体自定义内容'
'</div>'
let map = new BMap.Map("allmap");
let point = new BMap.Point(116.417854,39.921988)
map.centerAndZoom(point, 14)
map.addControl(new BMap.MapTypeControl())
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
let marker = new BMap.Marker(point)// 创建标注
map.addOverlay(marker) // 将标注添加到地图中
map.centerAndZoom(point, 15)
let myLabel = new BMap.Label('<span style="margin-right:20px">皖AT1234</span><span>张三</span>',{offset:new BMap.Size(20,-10)})
myLabel.setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑",
opacity: 0.8
});
 
let opts = {
width : 400, // 信息窗口宽度
height: 200, // 信息窗口高度
title : "王府井北" , // 信息窗口标题
enableMessage: true ,// 设置允许信息窗发送短息
}
let infoWindow = new BMap.InfoWindow(sContent, opts) // 创建信息窗口对象
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow,point) // 开启信息窗口
})
marker.addEventListener("mouseover", function() {
marker.setLabel(myLabel) //鼠标移入maker显示文字标签
})
marker.addEventListener("mouseout", function (e) {
map.removeOverlay(marker.getLabel()) //鼠标移除maker隐藏文字标签
})
}

vue-百度地图-maker文字标签显示隐藏的更多相关文章

  1. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  2. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  3. 百度地图api通过地址显示地图,白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  4. vue slot插槽v-show不控制显示隐藏

    vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.

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

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

  6. vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路)

    通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口: 说明:  因每个人写法不同.需求不同 ...

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

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

  8. vue + 百度地图api

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

  9. Android开发百度地图(一)--显示基本地图

    最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...

随机推荐

  1. oracle安装数据库中文乱码解决办法

    解决办法1: Linux下安装Oracle11g中文乱码 Linux下安装Oracle11g,安装界面乱码问题解决方法: 解决安装时中文是"囗囗囗囗囗囗囗囗" 1.进入刚解压的da ...

  2. jQuery中关于全选、全不选和反选

    1.首先我们要获取当前点击的对象,然后得到点击事件,   判断他的状态如果是checked的话就把该第二行的选中,   否则就取消选中. 2.当第二列功能小项没有全部选中时,该行第一列的复选款也要取消 ...

  3. C#面试分享:单例模式

    C#面试分享:单例模式 提问1:请给出单例模式的实现: 答: public class Animal { private static Animal _instance = null; private ...

  4. Pythoy 数据类型序列化——json&pickle 模块

    Pythoy 数据类型序列化--json&pickle 模块 TOC 什么是序列化/反序列化 pickle 模块 json 模块 对比json和pickle json.tool 命令行接口 什 ...

  5. npm 安装及使用

    1. 安装 npm 安装完node后,就自动完成npm的安装. 2. 常用的npm命令 #安装包 npm install <pkg> 或者 npm install <pkg>@ ...

  6. Approval Process 在 Apex 中的使用

    Approval Process(批准过程)简介 批准过程是一个复杂的业务过程.详细的内容可以参考官方文档. 英文版 中文版 官方trailhead模块 在Apex中调用Approval Proces ...

  7. 38.Odoo产品分析 (四) – 工具板块(7) – 车队管理(2)

    查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (四) – 工具板块(7) – 车队管理(1) 4 显示及状态说明 合同默认以列表视图显示:  当合约到期时,以红色显示,并显示状态为待关闭 ...

  8. 小程序实践(十一):showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  9. 2019Java查漏补缺(三)

    1.为什么这个public的类的类名必须和文件名相同    是为了方便虚拟机在相应的路径中找到相应的类所对应的字节码文件    2.java8 的一些新特性:     3: 数据库隔离级别 隔离级别 ...

  10. 从 RAID 到 Hadoop Hdfs 『大数据存储的进化史』

    我们都知道现在大数据存储用的基本都是 Hadoop Hdfs ,但在 Hadoop 诞生之前,我们都是如何存储大量数据的呢?这次我们不聊技术架构什么的,而是从技术演化的角度来看看 Hadoop Hdf ...