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

柔光的暖阳◎ 2022-08-27 01:17 457阅读 0赞

1.先让大家看一下效果

![SouthEast][]

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>

[SouthEast]: /images/20220824/967f94aee71d4a2e94109ad03b1984d9.png