百度地图InfoWindow信息窗体内容自定义

六月初六月初 地图开发 2018-12-02 17:27:25

百度地图自定义信息窗体内容！

主要代码块：

function addMapOverlay(){
  var markers = [
    {content:"网站名称：六月初博客站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初博客站",imageOffset: {width:-46,height:-21},position:{lat:31.005011,lng:103.653397}},
    {content:"网站名称：六月初生活站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初生活站",imageOffset: {width:-46,height:-21},position:{lat:31.010706,lng:103.623789}},
    {content:"网站名称：六月初小说站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初小说站",imageOffset: {width:-46,height:-21},position:{lat:30.986685,lng:103.613728}},
    {content:"网站名称：六月初美食站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初美食站",imageOffset: {width:-46,height:-21},position:{lat:30.985695,lng:103.583258}}
  ];
  for(var index = 0; index < markers.length; index++ ){
    var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
    var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
      imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
    })});
    var opts = {
      width: 200,
      title: markers[index].title,
      enableMessage: false
    };
    var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
    addClickHandler(marker,infoWindow);
    map.addOverlay(marker);
  };
}

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引用百度地图API-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2XVeNCR9w6bXCnswUvMTLxaqTGyjOtod"></script>
	</head>
	<body>
		<!--百度地图容器-->
		<div  id="map" style="height: 500px;"></div>			    
	</body>
	<script>
		initMap()
		//创建和初始化地图函数：
	    function initMap(){
	      createMap();//创建地图
	      addMapOverlay()
	    }
	    function createMap(){ 
	      map = new BMap.Map("map"); 
	      map.centerAndZoom(new BMap.Point(103.632988,30.995601),13);
	    }
		function addMapOverlay(){
	      var markers = [
	        {content:"网站名称：六月初博客站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初博客站",imageOffset: {width:-46,height:-21},position:{lat:31.005011,lng:103.653397}},
	        {content:"网站名称：六月初生活站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初生活站",imageOffset: {width:-46,height:-21},position:{lat:31.010706,lng:103.623789}},
	        {content:"网站名称：六月初小说站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初小说站",imageOffset: {width:-46,height:-21},position:{lat:30.986685,lng:103.613728}},
	        {content:"网站名称：六月初美食站 <br/>  网址：http://www.xuexiareas.com<br/>  ",title:"六月初美食站",imageOffset: {width:-46,height:-21},position:{lat:30.985695,lng:103.583258}}
	      ];
	      for(var index = 0; index < markers.length; index++ ){
	        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
	        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
	          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
	        })});
	        var opts = {
	          width: 200,
	          title: markers[index].title,
	          enableMessage: false
	        };
	        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);//循环插入信息块
	        addClickHandler(marker,infoWindow);
	        map.addOverlay(marker);
	      };
	    }
		
		function addClickHandler(target,window){
	      target.addEventListener("click",function(){
	        target.openInfoWindow(window);
	      });
	    }
		
	</script>
</html>

效果预览：


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！