简单信息窗示例

此示例展示如何创建信息窗并添加显示内容。

关键代码

    var infowindow = new sogou.maps.InfoWindow({
        content: contentString
    });

    var marker = new sogou.maps.Marker({
        position: myLatlng,
        map: map,
		//设置信息窗上方标题栏的文字
        title: '五道口简介'
    });
    sogou.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

代码解析

信息框内容。这是使用HTML脚本。也可以是DIV或相关容器对象。

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

五道口

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

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

'+ '

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

'+ '
'+ '
';

创建信息框对象,设置显示内容、位置等参数。绘制标志,点击时打开信息框。

    var infowindow = new sogou.maps.InfoWindow({
        content: contentString
    });

    var marker = new sogou.maps.Marker({
        position: myLatlng,
        map: map,
		//设置信息窗上方标题栏的文字
        title: '五道口简介'
    });
    sogou.maps.event.addListener(marker, 'click', function() {
      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 myLatlng = new sogou.maps.LatLng(39.992792,116.326142);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: sogou.maps.MapTypeId.ROADMAP
    }
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
    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 infowindow = new sogou.maps.InfoWindow({
        content: contentString
    });
    var marker = new sogou.maps.Marker({
        position: myLatlng,
        map: map,
		//设置信息窗上方标题栏的文字
        title: '五道口简介'
    });
    sogou.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码