高德地图-添加自定义图标

Posted 王一山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图-添加自定义图标相关的知识，希望对你有一定的参考价值。

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.         <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">  
  7.         <title>高德地图-添加自定义图标</title>  
  8.         <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>  
  9.         <script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>  
  10.         <script src="http://webapi.amap.com/maps?v=1.3&key=c2eb520334ddc5ab2bb70a3afe6a58cc"></script>  
  11.         <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>  
  12.         <style>  
  13.             body,html{  
  14.                 width: 99%;  
  15.                 height: 99%;  
  16.                 font-family: "微软雅黑";  
  17.                 font-size: 12px;  
  18.                 font-size-adjust: initial;  
  19.             }  
  20.             #keyMap{  
  21.                 width: 100%;  
  22.                 height: 100%;  
  23.                 font-family: "arial rounded mt bold";  
  24.                 font-size: -webkit-xxx-large;  
  25.             }  
  26.         </style>  
  27.     </head>  
  28.     <body>  
  29.         <div id="keyMap"></div>  
  30.         <div class="button-group">  
  31.             <input type="button" class="button" id="addTag" value="添加点标记"/>  
  32.         </div>  
  33.         <script>  
  34.             var marker;  
  35.             var map = new AMap.Map("keyMap",{  
  36.                 resizeEnable: true,  
  37.                 center: [114.297199,30.573714],  
  38.                 zoom: 13  
  39.             });  
  40.               
  41.             AMap.event.addDomListener(document.getElementById(‘addTag‘), ‘click‘, function() {  
  42.                 addTags();  
  43.             }, false);  
  44.               
  45.             function addTags()  
  46.             {  
  47.                 if(marker)  
  48.                 {  
  49.                     return;  
  50.                 }  
  51.                 marker = new AMap.Marker({  
  52.                     icon:"../img/ooopic_1464187636.png",  //路径
  53.                size: new AMap.Size(40, 50),//图片大小
  54.                     position:[114.297199,30.573714]  //图片出现的经纬度
  56.                 });  
  57.                   
  58.                 marker.setMap(map);  
  59.             }  
  60.         </script>  
  61.     </body>  
  62. </html> 

以上是关于高德地图-添加自定义图标的主要内容，如果未能解决你的问题，请参考以下文章

关于高德地图怎么搜索自定义地理位（自己定义图标位置）

高德地图自定义图标的点标记Marker--初体验

react amap 高德地图中多点定位，图标自定义

百度地图，怎么可以显示图标的呢？？

在高德地图上添加自定义Marker

高德地图——标记