高德地图 JS API【入门】—— 动态添加、删除覆盖物

时间：2024-03-23 08:46:58

因工作需要，开始入门学习高德地图API。工作时间十分短，这个例子也只是在学习过程中慢慢摸索出来的。有哪里不对，希望高人出来指点。 

先直接上个demo：

高德地图 JS API【入门】—— 动态添加、删除覆盖物

 

HTML部分：

<body>
	<div id="container" tabindex="0"></div>
	<div class="info" id="text">请用鼠标在地图上操作试试</div>
	<div class="input-card" style="width:26rem">
	    <h4>地图点击相关事件</h4>
	    <div>
      		<div class="input-item">
        		<button id="clickOn" class="btn" style="margin-right:1rem;">开启添加事件</button>
        		<button id="clickOff" class="btn" style="margin-right:1rem;">关闭添加事件</button>
        		<button id="clearAll" class="btn">清除所有标记</button>
      		</div>
    	</div>
	</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=你的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

JS部分：

（1）构造一个Map

var map = new AMap.Map('container',{
    zoom:14, //地图默认放大级别
});

（2）初始化单击事件

//覆盖物数组
var markers = new Array();

//单击事件初始化
function showInfoClick(e){
    var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
    document.querySelector("#text").innerText = text;

    //设置Marker
    var marker = new AMap.Marker({
        icon:'camera.jpg',//自定义图标
        position:e.lnglat,
    });

    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();

    contextMenu.addItem("操作1",function(){});
    contextMenu.addItem("操作2",function(){});
    contextMenu.addItem("清除标记",function(){
        //清除当前覆盖物
        map.remove(marker);
    });

    //绑定鼠标右击事件——弹出右键菜单
    marker.on('rightclick', function (e) {
        contextMenu.open(map, e.lnglat);
    }); 

    //为marker指定目标显示地图
    map.add(marker);
    markers.push(marker);
}

（3）初始化地图事件绑定、解除事件绑定：

//初始化地图绑定事件
function clickOn(){
    log.success("绑定事件!");  
    map.on('click', showInfoClick);
    map.on('dblclick', showInfoDbClick);
}
function clickOff(){
    log.success("解除事件绑定!"); 
    map.off('click', showInfoClick);
    map.off('dblclick', showInfoDbClick);
}

（4）给按钮添加事件：

// 给按钮绑定事件
$('#clickOn').on('click',clickOn);
$('#clickOff').on('click',clickOff);
$('#clearAll').on('click',function(){
	map.remove(markers);//清除所有覆盖物
});

 

相关文章