简单信息窗示例

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

关键代码

    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 = ''+
        ''+
        ''+
        '五道口'+
		'地图：'+
		''+
		'http://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=gb2312"/>
<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="http://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="http://map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16">'+
		'http://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>

简单信息窗示例

关键代码

代码解析

五道口

完整代码

运行代码