画折线进阶示例

此示例展示如何在地图区动态绘制折线对象。点击地图,将多次点击的位置连接起来,形成折线。

关键代码

    var polyOptions = {
      strokeColor: '#00ff00',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new sogou.maps.Polyline(polyOptions);
    poly.setMap(map);

    // 为地图添加点击的侦听器
    sogou.maps.event.addListener(map, 'click', addLatLng);
  /**
   * 处理地图的点击事件,将点击位置的左边添加到多边形节点
   * @param event mouseEvent
   */
  function addLatLng(event) {
    var path = poly.getPath()||[];
	//将点击位置的左边添加到多边形节点
    path.push(event.point);
	poly.setPath(path);
    // 同时在点击位置添加一个标记
    var marker = new sogou.maps.Marker({
      position: event.point,
      title: '#' + path.length,
      map: map
    });
  }

代码解析

设置折线参数,创建折线对象。

    var polyOptions = {
      strokeColor: '#00ff00',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new sogou.maps.Polyline(polyOptions);
    poly.setMap(map);

添加对地图区点击的侦听。

    // 为地图添加点击的侦听器
    sogou.maps.event.addListener(map, 'click', addLatLng);

将点击位置添加为新的折线节点,并绘制一个标记。

  /**
   * 处理地图的点击事件,将点击位置的左边添加到多边形节点
   * @param event mouseEvent
   */
  function addLatLng(event) {
    var path = poly.getPath()||[];
	//将点击位置的左边添加到多边形节点
    path.push(event.point);
	poly.setPath(path);
    // 同时在点击位置添加一个标记
    var marker = new sogou.maps.Marker({
      position: event.point,
      title: '#' + path.length,
      map: map
    });
  }

完整代码

<!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">
 /**
  * 画折线进阶示例
  * 点击地图,将多次点击的位置连接起来,形成曲线
  */
  var poly;
  var map;
  function initialize() {
    var beijing = new sogou.maps.LatLng(39.992792,116.326142);
    var myOptions = {
      zoom: 15,
      center: beijing,
      mapTypeId: sogou.maps.MapTypeId.ROADMAP
    };
    map = new sogou.maps.Map(document.getElementById('map_canvas'), myOptions);
    var polyOptions = {
      strokeColor: '#00ff00',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new sogou.maps.Polyline(polyOptions);
    poly.setMap(map);

    // 为地图添加点击的侦听器
    sogou.maps.event.addListener(map, 'click', addLatLng);
  }
  /**
   * 处理地图的点击事件,将点击位置的左边添加到多边形节点
   * @param event mouseEvent
   */
  function addLatLng(event) {
    var path = poly.getPath()||[];
	//将点击位置的左边添加到多边形节点
    path.push(event.point);
	poly.setPath(path);
    // 同时在点击位置添加一个标记
    var marker = new sogou.maps.Marker({
      position: event.point,
      title: '#' + path.length,
      map: map
    });
  }
</script>
</head>
<body onload="initialize()">
在地图上点击绘制曲线
  <div id="map_canvas"></div>
</body>
</html>

运行代码