百度地图之调用javaScript api接口实现多点标注及显示提示信息

最新推荐文章于 2023-05-09 16:46:43 发布

from_lazy_boy

最新推荐文章于 2023-05-09 16:46:43 发布

阅读量4k

点赞数

分类专栏： baiduMap 文章标签： baiduMap

本文链接：https://blog.csdn.net/u013310075/article/details/24435869

版权

baiduMap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.先让大家看一下效果

2.这个实现起来并不复杂,但调试可能需要一些时间,我做成了一个jsp,可以通过ajax调用后台获取如下json格式的数据,然后回调start()方法进行标注及显示提示信息

json格式如下:

[    {        "longitude": 102.680412, 
        "latitude": 25.030081, 
        "title": "大观楼", 
        "imgUrl": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdw1MsiOkIAsEjSrYiwUPiURRpWO2rJGx899zNVcqBN19OwHvjmg", 
        "description": "昆明大观楼，在大观公园，位于滇池北滨，距市中心约6千米."
    }, 
    {        "longitude": 102.677582, 
        "latitude": 25.028845, 
        "title": "大观楼停车场", 
        "imgUrl": "http://imgt0.bdstatic.com/it/u=3535641568,2312771970&fm=21&gp=0.jpg", 
        "description": "大观楼的停车场,停车方便,交通便捷..."
    }
]

整个jsp的页面代码如下,没有保留,直接复制放到tomcat下就可以访问,例如:http://localhost:8080/WeiXin/baidu.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AsnQt6acECu8FGhmXbm2aTEG"></script>
<title>添加多个标注点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">


// 百度地图API功能
/* var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>大观楼</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdw1MsiOkIAsEjSrYiwUPiURRpWO2rJGx899zNVcqBN19OwHvjmg' width='139' height='104' title='大观楼'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>昆明大观楼，在大观公园，位于滇池北滨，距市中心约6千米...</p>" + 
"</div>"; */

// 百度地图API功能
var map = new BMap.Map("allmap");
	
var objs = [{ longitude: 102.680412, latitude: 25.030081,title:"大观楼",imgUrl:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdw1MsiOkIAsEjSrYiwUPiURRpWO2rJGx899zNVcqBN19OwHvjmg",description:"昆明大观楼，在大观公园，位于滇池北滨，距市中心约6千米." }, { longitude: 102.677582, latitude: 25.028845,title:"大观楼停车场",imgUrl:"http://imgt0.bdstatic.com/it/u=3535641568,2312771970&fm=21&gp=0.jpg",description:"大观楼的停车场,停车方便,交通便捷..."}];
start(objs);
function start(objs){
	for(var i=0;i<objs.length;i++) {
		point = new BMap.Point(objs[i].longitude,objs[i].latitude);
		content = doContent(objs[i].title,objs[i].imgUrl,objs[i].description);
		addMarker(point,content);
	};
}	

//自定义一个函数用于拼接显示内容
function doContent(title,imgUrl,description) {
	return "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+title+"</h4>" + 
			"<img style='float:right;margin:4px' id='img' src='"+imgUrl+"' width='139' height='104' title='"+title+"'/>" + 
			"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+description+"</p>" + 
			"</div>";
}

// 编写自定义函数,创建标注
function addMarker(point,content){
	var marker = new BMap.Marker(point);
	//var infoWindow = new BMap.InfoWindow(sContent); 
	var infoWindow = new BMap.InfoWindow(content); 
	map.addOverlay(marker);
	marker.addEventListener("click", function(){          
		this.openInfoWindow(infoWindow);
		//图片加载完毕重绘infowindow
		document.getElementById('imgDemo').onload = function (){
		    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
		};
	});
}
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
</script>