android高德地图marker图标,图标样式-字体图标标注-示例中心-JS API UI 组件示例 | 高德地图API...
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
//创建地图
var map = new AMap.Map('container', {
zoom: 4
});
AMapUI.loadUI(['overlay/AwesomeMarker', 'overlay/SimpleMarker'],
function(AwesomeMarker, SimpleMarker) {
//icon的取值请见 http://fontawesome.io/icons/
var awIcons = [
'address-book',
'address-book-o',
'address-card',
'address-card-o',
'adjust',
'american-sign-language-interpreting',
'anchor',
'archive',
'area-chart',
'arrows',
'arrows-h',
'arrows-v',
'asl-interpreting',
'assistive-listening-systems',
'asterisk'
];
var iconStyles = SimpleMarker.getBuiltInIconStyles();
//获取一批grid排布的经纬度
var lngLats = getGridLngLats(map.getCenter(), 5, awIcons.length);
for (var i = 0, len = lngLats.length; i < len; i++) {
new AwesomeMarker({
//设置awesomeIcon
awesomeIcon: awIcons[i],
iconLabel: {
style: {
color: iconStyles[iconStyles.length - 1 - i],
fontSize: '14px'
}
},
//图标
iconStyle: iconStyles[i],
map: map,
position: lngLats[i],
title: 'awesomeIcon :' + awIcons[i]
});
}
});
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(new AMap.ToolBar({
map: map
}));
});
/**
* 返回一批网格排列的经纬度
* @param {AMap.LngLat} center 网格中心
* @param {number} colNum 列数
* @param {number} size 总数
* @param {number} cellX 横向间距
* @param {number} cellY 竖向间距
* @return {Array} 返回经纬度数组
*/
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
android高德地图marker图标,图标样式-字体图标标注-示例中心-JS API UI 组件示例 | 高德地图API...相关推荐
- android 高德定位 区域,区域定位-行政区划浏览-示例中心-JS API UI 组件示例 | 高德地图API...
区域定位 html, body, #container { width: 100%; height: 100%; margin: 0px; } #locTip { position: absolute ...
- android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...
拖拽选址 html, body { height: 100%; margin: 0; width: 100%; padding: 0; overflow: hidden; font-size: 13p ...
- 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
- css技术点二:字体图标(阿里巴巴字体图标使用)
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标 二.字体图标的好处 三.字体图标用法 四.字体图标格式介绍 一.什么是字体图标 字体图标可以为前端工程师提供一种方便高效的图标使用 ...
- 将小图标转换成字体图标代码
将小图标转换成字体图标代码 转自:https://jingyan.baidu.com/article/ea24bc39ddff7bda62b331b0.html
- vue中 使用element-ui 图标和阿里字体图标结合使用
vue中 使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
- android 字体文件压缩,Android创建assets文件夹并使用字体图标(Icon Font)
首先我们要知道如何在AS中新建引用assets文件 1.将项目切换到Project模式 Project.png 2.要注意assets文件夹要跟Java文件在同一目录下,都包含在main的文件下面. ...
- html 字体图标转换工具,字体图标的制作方式
引言: 如今移动端页面越来越频繁,图标字体的应用也越来越广泛.废话少说,根据自己的实践,今天和大家一起分享两种将图标转换为字体的方法.欢迎大家拍砖! 方法一:SVG+icomoon(目前喜欢并推荐使用 ...
- 阿里巴巴图标库的字体图标使用方法
文章目录 前言:此方法适合成体系的应用图标,若使用单个图标可直接下载使用 一.将图片加入项目并下载至本地 二.引用图标的三种方式 1. font-class引用 2. Symbol 引用 3. Uni ...
最新文章
- 只要5分钟用数据可视化带你看遍11月份新闻热点事件
- 3780mysql_MySQL添加外键Foreign Keys出错,报错[HY000][3780]
- windows server 2003 学习笔记
- pageX,clientX,offsetX,layerX的区别
- 练习:利用函数实现一个登陆系统
- Java I/O流-总结(InputStream,OutputStream,Reader,Writer)
- android计算器弹窗,android实现简易计算器
- 计算机盐城工学院和常熟理工,【选专业】这6所二本院校的专业,就业不输一本学生!...
- MinGW 使用 msvcr90.dll
- 微信公众号发送客服消息【文本、图片】
- nginx解析漏洞 只要可以上传文件就会被黑
- bzoj1179[Apio2009]Atm
- 区分const,static,readonly,volatile四个关键字
- cmd 编码修改。 牛阿。 解决问题
- 几个支持 FreeSWITCH 的网络电话的安装与使用(linphone、MicroSIP、Sipdroid)
- html5测试苹果7plus,苹果7 Plus评测:P3广色域屏幕测试
- 小米手机qq邮箱收件服务器,小米手机无法添加邮箱?是你不会设置而已
- 【leetcode】解数独
- [css] css 3d 动画,跟随鼠标移动做球形旋转
- 汽车侧向动力学模型简介(动力学建模入门知识)
热门文章
- 建立“知识共享”生态圈,培养塔尔斯基数学小后代,不是说假话、放空炮
- 辞职犹豫不决怎么办?遇到这五种心理那就辞吧
- 解决Ubuntu18.04版本高分辨率下导致字体过小问题
- 计算机房需要排风吗,机房新风排风系统怎么样 机房新风排风系统原理介绍【详解】...
- Vue3配置postcss-pxtorem报错[plugin:vite:css] Failed to load PostCss config
- scratch下实现子弹追踪特效
- 漫画:猜数字说公牛母牛的高频面试题
- Guitar Pro8电脑版更新下载及主要功能介绍
- TypeError:‘bool’ oboject is not callable
- Markdown Day01