事件侦听处理、添加标记、信息窗

此示例展示添加标记和信息框的使用。点击5个标记可以看到信息窗中有五个单词,连成的一条信息。

关键代码

  //随机添加五个点到地图上
  var southWest = new sogou.maps.LatLng(39.869683,116.294631);
  var northEast = new sogou.maps.LatLng(39.982940,116.442851);
  var bounds = new sogou.maps.LatLngBounds(southWest,northEast);
  //设置地图,使其与指定范围相符。
  map.fitBounds(bounds);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new sogou.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new sogou.maps.Marker({
        position: location, 
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());
    attachSecretMessage(marker, i);
  }
}

// 点击5个标记可以看到五个单词连成的一条信息
function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new sogou.maps.InfoWindow(
      { content: message[number]
      });
  sogou.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

代码解析

设置地图的Bounds。使其符合指定范围。

  var southWest = new sogou.maps.LatLng(39.869683,116.294631);
  var northEast = new sogou.maps.LatLng(39.982940,116.442851);
  var bounds = new sogou.maps.LatLngBounds(southWest,northEast);
  //设置地图,使其与指定范围相符。
  map.fitBounds(bounds);

在范围内随机绘制五个标志,并调用信息框的侦听和设置函数。

  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new sogou.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new sogou.maps.Marker({
        position: location, 
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());
    attachSecretMessage(marker, i);
  }

分别设置五个标志的信息框内容。

// 点击5个标记可以看到五个单词连成的一条信息
function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new sogou.maps.InfoWindow(
      { content: message[number]
      });
  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">
 /**
  * 事件侦听处理、添加标记、信息窗
  * 点击5个标记可以看到信息窗中有五个单词,连成的一条信息。
  */
var map;
function initialize() {
  var latLng = new sogou.maps.LatLng(39.869683,116.294631);
  var myOptions = {
    zoom: 12,
    center: latLng,
    mapTypeId: sogou.maps.MapTypeId.ROADMAP
  }

  map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

  //随机添加五个点到地图上
  var southWest = new sogou.maps.LatLng(39.869683,116.294631);
  var northEast = new sogou.maps.LatLng(39.982940,116.442851);
  var bounds = new sogou.maps.LatLngBounds(southWest,northEast);
  //设置地图,使其与指定范围相符。
  map.fitBounds(bounds);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new sogou.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new sogou.maps.Marker({
        position: location, 
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());
    attachSecretMessage(marker, i);
  }
}

// 点击5个标记可以看到五个单词连成的一条信息
function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new sogou.maps.InfoWindow(
      { content: message[number]
      });
  sogou.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码