高德地图自定义背景图+自定义文字，marker自定义

 mounted() {this.addMarker()},

//实例化marker

 addMarker() {let me = this;var position = new AMap.LngLat(119.440933, 32.467529);// 点标记显示内容，HTML要素字符串var markerContent = '' +'<div class="custom-content-marker">' +'  <p>严重拥堵：长度686米' +'</p>'+'</div>';var marker = new AMap.Marker({position: position,// 将 html 传给 contentcontent: markerContent,// 以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-13, -30)});  // 将 markers 添加到地图me.map.add( marker);},

背景图或者图片一定要是网络图片，本地图片转换网络图片可以看网上的教程。

<style lang="less" >.custom-content-marker {position: relative;width: 80px;height: 40px;background: url('https://static01.imgkr.com/temp/a1516eb4f6fc4fd188da13de58a3a214.png');background-size:100% 100% ;}.custom-content-marker img {width: 100%;height: 100%;}   </style>

高德地图自定义背景图+自定义文字，marker自定义相关推荐

Vue - 实现信纸输入写作，类似写明信片时的一张背景图片 + 横格纸效果（信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色，一切由您 DIY 自定义样式）纯CSS完成支持任何vue项目
前言网上没有这方面的组件和插件,本文来做优质的组件(附带详细的使用方法及源码注释),无任何第三方插件依赖. 本文实现了在 Vue / Nuxt 项目中,实现 "横格纸" 一样的 ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
[css] 自定义背景图拼接
将背景切片为head.body.foot三个png /*背景图片*/background: url(~@/assets/head.png) no-repeat centertop/100% 73px, ...
高德地图与CAD图叠加显示方法汇总及优缺点分析
前言高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
Thinkphp5 生成二维码并与背景图、文字组合生成分享海报
自己做个记录,省的以后要去做过的项目里扒 1.下载安装包,地址: 链接:https://pan.baidu.com/s/1EBbgJYHXJp-4YQA7zDT5gw 提取码:qboc 2.下载完放到 ...
IDEA设置自定义背景图
IDEA是支持自定义背景图片的,今天在这里给大家分享一个超级简单的方法第一步,打开idea的settings- ,在输入框搜索Set Background Image 第二步,右键Set Backg ...
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式，多用于异形弹窗背景图
如果阁下想玩进阶版的背景图样式请移步[进阶版九宫格背景图片]如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果,并自适应任何宽高效果?_你挚爱的强哥❤给你发来1条消息❤-CSDN博 ...
实现海报合成工具，自定义背景图、位置、大小等（html2canvas）
<template><div class="all-tool"><div :style="bgSt ...

高德地图自定义背景图+自定义文字，marker自定义

高德地图自定义背景图+自定义文字，marker自定义相关推荐

最新文章

热门文章