高德地图搜索以后生成的marker的点击事件

使用高德地图时,通过搜索便可将地址搜索出来,但是想点击当前marker获取当前的经纬度和具体地址时,如下图:

这里写图片描述

    AMap.event.addListener(autocomplete, "select", function(e){
       //TODO 针对选中的poi实现自己的功能
       placeSearch.search(e.poi.name);
       //这是实现搜索功能
    });

//以下代码实现marker的点击事件获取相关信息

//点击事件
    AMap.event.addListener(placeSearch, "markerClick", function(e){
    	console.log(e.data.location);//当前marker的经纬度信息
    	 document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;
    	console.log( e.data.address);//获取当前marker的具体地址信息
    	console.log(e.data);//则是包含所有的marker数据
    	document.getElementById("input").value =  e.data.address;

这样就可将点击的当前的marker所有信息获取然后做处理

更多方法可参考高德地图JavaScript API
http://lbs.amap.com/api/javascript-api/summary

### 高德地图API Marker使用方法 #### 创建并添加Marker到地图上 为了在高德地图中展示标记物(Marker),需先实例化`AMap.Map`对象来初始化地图容器,之后通过调用`addMarker()`函数向指定位置放置标志。下面是一段用于创建带有默认样式的Marker的JavaScript代码片段[^1]。 ```javascript // 初始化地图对象 var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] }); // 添加单个Marker let marker = new AMap.Marker({ position: new AMap.LngLat(116.397428, 39.90923), title: '北京' }); map.add(marker); ``` #### 自定义Marker外观 除了采用内置样式外,还可以自定义Marker的表现形式,比如更改图标图片路径、调整大小以及设置偏移量等属性。这可以通过配置`icon`, `offset`参数实现个性化需求。 ```javascript let customIcon = new AMap.Icon({ size: new AMap.Size(25, 34), // 图标尺寸 image: './img/marker.png', imageSize: new AMap.Size(25, 34) }); let customMarker = new AMap.Marker({ icon: customIcon, position: [116.397428, 39.90923], offset: new AMap.Pixel(-13, -30) // 设置锚点相对于图标的位移 }); map.add(customMarker); ``` #### 给Marker绑定事件监听器 为了让用户交互更加友好,在实际应用开发过程中往往还需要给Marker注册各种类型的回调处理程序,例如点击触发弹出窗口显示详情信息等功能。这里给出一段简单的例子说明如何响应用户的鼠标操作[^2]。 ```javascript customMarker.on('click', function () { let infoWindow = new AMap.InfoWindow({content:'<h4>欢迎来到北京市</h4>'}); infoWindow.open(map,[116.397428, 39.90923]); }) ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值