百度地图给指定的点加标签

最新推荐文章于 2023-06-27 14:26:12 发布

帆酱

最新推荐文章于 2023-06-27 14:26:12 发布

阅读量2.5k

点赞数

分类专栏： js map 文章标签： js map 百度地图

本文链接：https://blog.csdn.net/weixin_41187842/article/details/81281184

版权

js 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

map

3 篇文章 0 订阅

订阅专栏

本文介绍利用百度地图api先显示地图，然后在地图上标记一个或者多个点，然后将每个点的自定义标签用tip的方式展现出来。

效果截图：

代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
	<title>根据城市名设置地图中心点</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	//新建地图点的集合
var points = [  
	{"lng":114.046304,"lat":22.628841,"url":"http://www.baidu.com","id":1,"name":"p1"},
]; 
//创建标注点并添加到地图中
function addMarker(points) {
    //循环建立标注点
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
        var marker = new BMap.Marker(point); //将点转化成标注点
        map.addOverlay(marker);  //将标注点添加到地图上
//      //添加监听事件，点击后显示tip
//      (function() {
//          var thePoint = points[i];
//          marker.addEventListener("click",
//              function(){
//              showInfo(this,thePoint);
//          });
//      })();
		//直接显示tip，不添加事件
		showInfo(marker,points[i]);
    }
}
function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent = 
    '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 80px;display: inline-block;">我的地址：</span><a href="'+point.url+'">嘉熙业广场 <a></li>'  
    +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
//创建地图
var map = new BMap.Map("allmap");    
map.centerAndZoom(new BMap.Point(114.046304,22.628841), 19);  // 设置中心点
map.setCurrentCity("深圳");          //设置为深圳
map.addControl(new BMap.MapTypeControl());   
map.enableScrollWheelZoom(true);     
addMarker(points);
</script>
</script>

帆酱

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
百度地图给指定的点加标签

本文介绍利用百度地图api先显示地图，然后在地图上标记一个或者多个点，然后将每个点的自定义标签用tip的方式展现出来。效果截图：代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;...
复制链接

扫一扫