- <!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="../js/jquery-1.12.3.js" ></script>
- <script src="http://webapi.amap.com/maps?v=1.3&key=c2eb520334ddc5ab2bb70a3afe6a58cc"></script>
- <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
- <style>
- body,html{
- 99%;
- height: 99%;
- font-family: "微软雅黑";
- font-size: 12px;
- font-size-adjust: initial;
- }
- #keyMap{
- 100%;
- height: 100%;
- font-family: "arial rounded mt bold";
- font-size: -webkit-xxx-large;
- }
- </style>
- </head>
- <body>
- <div id="keyMap"></div>
- <div class="button-group">
- <input type="button" class="button" id="addTag" value="添加点标记"/>
- </div>
- <script>
- var marker;
- var map = new AMap.Map("keyMap",{
- resizeEnable: true,
- center: [114.297199,30.573714],
- zoom: 13
- });
- AMap.event.addDomListener(document.getElementById('addTag'), 'click', function() {
- addTags();
- }, false);
- function addTags()
- {
- if(marker)
- {
- return;
- }
- marker = new AMap.Marker({
- icon:"../img/ooopic_1464187636.png", //路径
-
size: new AMap.Size(40, 50),//图片大小
- position:[114.297199,30.573714] //图片出现的经纬度
- });
- marker.setMap(map);
- }
- </script>
- </body>
- </html>