如何在百度地图里面添加覆盖物,并且对每个覆盖物添加点击之后d出信息框的功能

如何在百度地图里面添加覆盖物,并且对每个覆盖物添加点击之后d出信息框的功能,第1张

/**

添加标记

* @param [{id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:d窗键首芦内容,viewImg:d窗图片},...] data

*/

function addMar(data){

for(var i 芹宽= 0 i < data.length i++){

var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),{icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50))})  // 稿带创建标注

marker.setTitle(data[i].name)

marker.dataCont = data[i]

map.addOverlay(marker)

marker.addEventListener("click", function(e){   

var viewWin = "<h4 style='margin:0 0 5px 0padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" + 

"<img style='float:rightmargin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" + 

"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+e.target.dataCont.context+"</p>" + 

"</div>"

var infoWindow = new BMap.InfoWindow(viewWin)

this.openInfoWindow(infoWindow)

//图片加载完毕重绘infowindow

document.getElementById('imgDemo').onload = function (){

infoWindow.redraw()//防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏

}

})

}

}

可以这样,先把生成标注的json数据直接存进marker对象.添加marker的点击监听,触发监听事件时会拿到marker对象本身,从里面可以获取之前我们存进去的json数据,然后拿这个json数据直接生成d窗

百度地图添加覆盖物,拖放覆盖物获取当前的坐标,点击地图设置覆盖位置,也可以拖拽地图设置覆盖物位置

方法/步骤

<html>

<head>

<meta http-equiv="Content-Type"迟旦咐 content="text/htmlcharset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body,html {

width: 100%

height: 100%

margin: 0

font-family: "微软雅黑"

font-family: "微软雅黑"

}

#allmap {

width: 100%

height: 500px

}

p {

margin-left: 5px

font-size: 14px

}

</style>

<script type="text/javascript"

src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<title>百度地图添加覆盖物,拖拽覆盖物获取当前坐标</title>

</head>迟隐

<body>

<div id="allmap"></div>

<码纯p>添加点击地图监听事件,点击地图后显示当前经纬度</p>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap")

var point = new BMap.Point(116.404, 39.915)

map.centerAndZoom(point, 11)

map.addEventListener("click", function(e){

alert('经度:'+e.point.lng+' , 纬度: '+e.point.lat)

var now_point = new BMap.Point(e.point.lng, e.point.lat )

marker.setPosition(now_point)//设置覆盖物位置

})

var marker = new BMap.Marker(point)//创建marker对象

marker.enableDragging()//marker可拖拽

//拖拽结束事件

marker.addEventListener("dragend", function(e){

//获取覆盖物位置

var o_Point_now = marker.getPosition()

var lng = o_Point_now.lng

var lat = o_Point_now.lat

//e.point.lng 地理经度。

// e.point.lat 地理纬度。

//alert(e.point.lng + "---, " + e.point.lat)

get_lng_lat()

})

map.addOverlay(marker)//在地图中添加marker

get_lng_lat()

//获取经纬度

function get_lng_lat(){

//返回覆盖物标注的地理坐标。

var o_Point_now = marker.getPosition()

var lng = o_Point_now.lng

var lat = o_Point_now.lat

alert('经度:'+lng+' , 纬度: '+lat)

}

</script>

一般凳液消view都是在activity的oncreat方法中进行初始化,如果你的mMapView也是这样的埋散话,应该是在oncreat里面写这句话。

如果不是这样,那就在覆盖层显示之前添加这句话,要不然没法显枣知示了!


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11971185.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存