高德地图 嵌入iframe实现地图选点 回显地址和经纬度
时间: 2023-12-24 19:04:55 浏览: 203
高德地图获取经纬度
可以参考以下代码实现:
HTML部分:
```
<iframe id="mapFrame" src="https://ditu.amap.com/"></iframe>
<button onclick="getSelectedPoint()">获取选中点</button>
<div id="address"></div>
<div id="lnglat"></div>
```
JavaScript部分:
```
// 获取iframe中的window对象
var mapWin = document.getElementById("mapFrame").contentWindow;
// 等待地图加载完成后执行
mapWin.onload = function() {
// 监听地图选点事件
mapWin.AMap.event.addListener(mapWin.mapObj, "click", function(e) {
// 回显地址和经纬度
document.getElementById("address").innerHTML = e.lnglat.getLng() + ", " + e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = e.address;
});
}
// 获取选中点
function getSelectedPoint() {
// 在iframe中执行JavaScript获取选中点信息
var selectedPoint = mapWin.document.getElementById("tip_input").value;
alert(selectedPoint);
}
```
需要注意的是,由于高德地图API的限制,不可以直接在iframe中执行JavaScript获取选中点信息,需要在父页面中使用`contentWindow`属性获取到iframe中的`window`对象,然后在父页面中处理选中点信息。
阅读全文