【高德地图API】如何设置Icon的imageSize?
在地图开发中,我们需要把标注换成各种各样的图片,以突显个性。
在高分辨率的手机下,图片尺寸需要压缩至一半,以保持图片清晰。让我们来看一看,应该如何实现。
有开发者为了改变图片的尺寸,直接写成了
imageSize: (64, 64)
或者
imageSize: "64px 64px"
是否有问题呢?
首先来看一下imageSize的类参考,看到类型是Size。
Size是高德API自定义的类型,并不是num。所以,直接写数字的做法是不对的。
那么正确的写法,应该是:
imageSize: new AMap.Size(64,64)
在高分辨率显示器上,应该把尺寸压缩一半。比如图片尺寸是128*128,那么imageSize需要把图片压缩一半,应为64*64。代码如下:
//添加点标记,并使用自己的icon
new AMap.Marker({
map: map,
position: [116.47395,39.986058],
icon: new AMap.Icon({
image: "marker128.png",
size: new AMap.Size(128, 128), //图标大小
imageSize: new AMap.Size(64,64)
})
});
demo地址:http://zhaoziang.com/amap/imageSize.htm
全部示例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义图标</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=250860ccb5953fa5d655e8acf40ebb7"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//初始化地图对象,加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
zoom:11
});
//添加点标记,并使用自己的icon
new AMap.Marker({
map: map,
position: [116.47395,39.986058],
icon: new AMap.Icon({
image: "marker128.png",
size: new AMap.Size(128, 128), //图标大小
imageSize: new AMap.Size(64,64)
})
}); //添加点标记,并使用自己的icon
new AMap.Marker({
map: map,
position: [116.321514,39.91289],
icon: new AMap.Icon({
image: "marker128.png",
size: new AMap.Size(128, 128), //图标大小
imageSize: new AMap.Size(128,128)
})
});
</script>
</body>
</html>
【高德地图API】如何设置Icon的imageSize?的更多相关文章
- 高德地图API应用
高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...
- 【高德地图API】如何解决坐标转换,坐标偏移?
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
- 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 【高德地图API】如何打造十月妈咪品牌地图?
原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ---------------------------------------- ...
- 安卓---高德地图API应用
说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
- 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析
原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...
随机推荐
- OSIC Performance Bot
https://github.com/lbragstad/keystone-performance
- 状态机学习(三)解析JSON
来自 从零开始的 JSON 库教程 从零开始教授如何写一个符合标准的 C 语言 JSON 库 作者 Milo Yip https://zhuanlan.zhihu.com/json-tutorial ...
- Windows 2008安装SQL 2008图解
SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本. 在现今数据的世界里,公司要获得成功和不断发展,他们 ...
- 【Java】XML解析之JDOM
JDOM介绍 JDOM是一个开源项目,它基于树型结构,利用纯JAVA的技术对XML文档实现解析.生成.序列化以及多种操作.使用jdom需要引入jdom.jar包. XML生成及解析 代码如下: pac ...
- Repeater 使用方法
ItemTemplate: 包含要逐一呈现给数据源中的每个数据项的 HTML 元素和控件 AlternatingItemTemplate: 包含要逐一呈现给数据源中的其他每个数据项的 HTML 元素和 ...
- C# 基本算法
1.冒泡排序 排序 ,,,,,, }; ; i < ArrayList.Count(); i++) { for (int j = i; j < ArrayList.Count(); j++ ...
- 第一个python程序hello.py
使用vim编辑代码: #!/usr/bin/python2.7 #-*-coding:utf-8-*- name = raw_input('请输入你的名字:') print 'Hello,',name ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- python 静态方法,类方法 ,类的继承
转自: http://cowboy.1988.blog.163.com/blog/static/75105798201091141521583/ 1.关于定义类的一些奇特之处 今天在Python中 ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...