zoukankan      html  css  js  c++  java
  • 高德地图-添加自定义图标

    1、问题背景

         这里有张武汉市地图,点击按钮在地图上指定经度、纬度下添加小图标


    2、实现源码

    <!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",
        				position:[114.297199,30.573714]
        			});
        			
        			marker.setMap(map);
        		}
    		</script>
    	</body>
    </html>
    

    3、实现结果

    (1)初始化时



    (2)点击“添加点标记”


  • 相关阅读:
    如何使用pip安装PythonMySQLdb模块?
    Linux:信号(1):signal函数、pause函数、alarm函数
    python字符串前面加上'r'的作用
    在LINUX中 用Ctrl+z挂起的命令怎么切回到原任务的命令窗口
    A*寻路初探 GameDev.net
    [3d跑酷] Xcode5 打包 发布配置
    [cb]NGUI组件基类之 UIWidget
    [cb]Unity 项目架构
    使用Unity3D的50个技巧:Unity3D最佳实践
    Doxygen Tool For Unity
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314179.html
Copyright © 2011-2022 走看看