在地图开发中，我们需要把标注换成各种各样的图片，以突显个性。

  

在高分辨率的手机下，图片尺寸需要压缩至一半，以保持图片清晰。让我们来看一看，应该如何实现。

有开发者为了改变图片的尺寸，直接写成了

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？的更多相关文章

  1. 高德地图API应用

    高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...

  2. 【高德地图API】如何解决坐标转换，坐标偏移？

    http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...

  3. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  4. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  5. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  6. 【高德地图API】如何打造十月妈咪品牌地图？

    原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ---------------------------------------- ...

  7. 安卓---高德地图API应用

    说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...

  8. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  9. 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  10. 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

随机推荐

  1. coreseek实战(三)：全文搜索在php中应用（使用api接口）

    coreseek实战(三):全文搜索在php中应用(使用api接口) 这一篇文章开始学习在php页面中通过api接口,使用coreseek全文搜索. 第一步:综合一下前两篇文章,coreseek实战( ...

  2. IOS线程的一些总结

    主线程的作用 (在主线程中才能设置) 显示/刷新UI界面 处理UI事件(比如点击事件.滚动事件.拖拽事件): 主线程的使用注意 别将比较耗时的操作放到主线程中. 耗时操作会卡住主线程.影响体验. [N ...

  3. vsftpd移植

    1.交叉编译 2.将生成的 vsftpd 复制到目标板 /usr/sbin 目录,vsftpd.conf 复制到目标板 /etc 目录,并添加 vsftpd 为可执行: 3.配置 使用 vi 打开 v ...

  4. LeetCode OJ--Swap Nodes in Pairs

    https://oj.leetcode.com/problems/swap-nodes-in-pairs/ 链表的处理 /** * Definition for singly-linked list. ...

  5. linux运维的认知及RHEL7 Unix/Linux 系统 介绍和安装

    如何成为一个优秀的linux运维人员?      如果你有机会和条件:环境能够磨练一个人的能力和意志.      大胆的做你从未做过的项目,每一个项目都是对自身的极大提升.      有好的环境资源不 ...

  6. Java list的用法排序及遍历

    原文地址:http://baike.xsoftlab.net/view/208.html 1用法 ·ArrayList ·LinkedList 2排序 ·数字排序 ·中文排序 ·实体类排序 3遍历 · ...

  7. Log4net日志GUI配置工具

    关于log4net的配置文章在园子里真的很多,但是有关GUI界面配置的文章确定太少,改写了一个以前很早的工具 以前的那个有很多的问题,这个基本的大的问题没有,可能一个小问题还是需要修改下,基本功能肯定 ...

  8. JBOSS通过Apache负载均衡方法二：使用mod_cluster

    本文介绍使用mod_cluster组件通过apache来对JBOSS做负载均衡.基本环境为:linux RH6.3 64bit下使用jboss-eap-6.0和mod-cluster 1.2.6(集成 ...

  9. [ASE][Daily Scrum]11.26

    今天主要是修复一些历史遗留问题以及bug, 在task上进展不是很明显, 在地图与客户端同步之后产生了一些bug,例如一发子弹会消掉很多砖块,服务器地图与本地地图不同步等等... 目前的大方向分工是这 ...

  10. WP8：在Cocos2d-x中使用OpenXLive

    一．    Cocos2d-x for Windows Phone 到2013年底,几大手游引擎都陆续支持WP8了,特别是Unity3D和Cocos2d-x.有过游戏开发经验的朋友们应该对这两个引擎不 ...