信息窗示例 在不同标记上打开信息窗显示不同内容

此示例展示如何在不同标记上打开信息窗显示不同内容。

关键代码

    //数据
    var datas = [{
				name:"五道口",
				position:new sogou.maps.LatLng(39.991645,116.331405),
				content:contentString
			},
			{
				name:"搜狐网络大厦",
				position:new sogou.maps.LatLng(39.992670,116.325993),
				content:"搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦"
			},
			{
				name:"融科资讯中心",
				position:new sogou.maps.LatLng(39.982994,116.319580),
				content:"融科资讯中心融科资讯中心融科资讯中心融科资讯中心融科资讯中心"
			}
	];
    var infowindow = new sogou.maps.InfoWindow();
	for(var i=0;i<datas.length;i++){
		createMarker(map,infowindow,datas[i])
	}
  }
  //创建标记
  function createMarker(map,infowindow,data)
  {
      var marker = new sogou.maps.Marker({
        position: data.position,
        map: map,
		//设置信息窗上方标题栏的文字
        title: data.name
    });
    sogou.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(data.content);
		infowindow.open(map,marker);
		
    });

代码解析

信息框内容。使用数组保存多项内容参数。

  var contentString = '
'+ '
'+ '
'+ '

五道口

'+ '地图:'+ ''+ '//map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16 '+ '
'+ '

五道口, 由于是从北京北站出发的京包铁路的第五个道口,故名“五道口”,'+ '而其前后各有“四道口”、“六道口”。目前并没有修建立体道口,'+ '所以列车通过时需要围栏挡住过往车辆行人通行,随着该地区交通量不断增大,'+ '经常造成交通堵塞。'+ '

'+ '

早年间,西直门外以北地区人烟稀少,以后才有人在此开垦出庄稼地,'+ '因多有车马往来,便人为地走出几条大道。上个世纪初期,自西直门火车站'+ '(今北京北站)由南向北修建了一条铁路(今京包铁路),于是就出现了一些与铁路交叉的道口,'+ '并自南向北称为第一道口、第二道口、第三道口、第四道口、第五道口等,以后简称为一道口、'+ '二道口、三道口、四道口、五道口。随着铁路沿线地区居住人员的增多,在一些道口附近逐渐形成村落,'+ '并依道口之名得村名,称四道口村、五道口村、六道口村等,而没有形成村落的道口就被人们逐渐地遗忘了。'+ '但也有人认为五道口因是五个路口的交会处而得名,是从五个方向在此交会的路口,此说难以考证。 , '+ '

'+ '
'+ '
'; //数据 var datas = [{ name:"五道口", position:new sogou.maps.LatLng(39.991645,116.331405), content:contentString }, { name:"搜狐网络大厦", position:new sogou.maps.LatLng(39.992670,116.325993), content:"搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦" }, { name:"融科资讯中心", position:new sogou.maps.LatLng(39.982994,116.319580), content:"融科资讯中心融科资讯中心融科资讯中心融科资讯中心融科资讯中心" } ];

创建信息框对象。循环创建标记,侦听标记点击,设置不同的信息框内容。

    var infowindow = new sogou.maps.InfoWindow();
	for(var i=0;i<datas.length;i++){
		createMarker(map,infowindow,datas[i])
	}
  //创建标记
  function createMarker(map,infowindow,data)
  {
      var marker = new sogou.maps.Marker({
        position: data.position,
        map: map,
		//设置信息窗上方标题栏的文字
        title: data.name
    });
    sogou.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(data.content);
		infowindow.open(map,marker);
		
    });
  }

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>搜狗地图 JavaScript API示例: 简单信息窗示例</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
 /**
  * 简单信息窗示例
  * 创建信息窗并添加显示内容
  * 
  */
  function initialize() {
  var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">五道口</h1>'+
		'地图:'+
		'<a target="_blank" href="//map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16">'+
		'//map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16</a> '+
        '<div id="bodyContent">'+
        '<p><b>五道口</b>, 由于是从北京北站出发的京包铁路的第五个道口,故名“五道口”,'+
		'而其前后各有“四道口”、“六道口”。目前并没有修建立体道口,'+
		'所以列车通过时需要围栏挡住过往车辆行人通行,随着该地区交通量不断增大,'+
		'经常造成交通堵塞。'+
        '</p>'+
        '<p>早年间,西直门外以北地区人烟稀少,以后才有人在此开垦出庄稼地,'+
		'因多有车马往来,便人为地走出几条大道。上个世纪初期,自西直门火车站'+
		'(今北京北站)由南向北修建了一条铁路(今京包铁路),于是就出现了一些与铁路交叉的道口,'+
		'并自南向北称为第一道口、第二道口、第三道口、第四道口、第五道口等,以后简称为一道口、'+
		'二道口、三道口、四道口、五道口。随着铁路沿线地区居住人员的增多,在一些道口附近逐渐形成村落,'+
		'并依道口之名得村名,称四道口村、五道口村、六道口村等,而没有形成村落的道口就被人们逐渐地遗忘了。'+
		'但也有人认为五道口因是五个路口的交会处而得名,是从五个方向在此交会的路口,此说难以考证。 , '+
        '</p>'+
        '</div>'+
        '</div>';
    //数据
    var datas = [{
				name:"五道口",
				position:new sogou.maps.LatLng(39.991645,116.331405),
				content:contentString
			},
			{
				name:"搜狐网络大厦",
				position:new sogou.maps.LatLng(39.992670,116.325993),
				content:"搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦搜狐网络大厦"
			},
			{
				name:"融科资讯中心",
				position:new sogou.maps.LatLng(39.982994,116.319580),
				content:"融科资讯中心融科资讯中心融科资讯中心融科资讯中心融科资讯中心"
			}
	];
    var myOptions = {
      zoom: 15,
      center: new sogou.maps.Point(12949398,4836488),
      mapTypeId: sogou.maps.MapTypeId.ROADMAP
    }
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infowindow = new sogou.maps.InfoWindow();
	for(var i=0;i<datas.length;i++){
		createMarker(map,infowindow,datas[i])
	}
  }
  //创建标记
  function createMarker(map,infowindow,data)
  {
      var marker = new sogou.maps.Marker({
        position: data.position,
        map: map,
		//设置信息窗上方标题栏的文字
        title: data.name
    });
    sogou.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(data.content);
		infowindow.open(map,marker);
		
    });
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码