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

大前端 同时被 2 个专栏收录
4 篇文章 0 订阅
1 篇文章 0 订阅

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

先直接上个demo:

demo

 

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);//清除所有覆盖物
});

 

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值