画折线鼠标悬停高亮、以及调用focus()方法示例

此示例展示如何设置线对象鼠标悬停高亮和focus()方法调用。设置默认样式、鼠标悬停时样式。

鼠标移到这儿让地图上的线高亮,或者鼠标移到线上看看

鼠标移动到上面的文字上,设置两条线高亮,移除取消高亮。

关键代码

    var myLatLng = new sogou.maps.LatLng(39.988176,116.319404);
	//定义LineStyle类型样式
	var lineStyle1={
		id:"L01",
		"v:stroke":{
			color:"#f00",
			weight:"3",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};
	//定义带箭头的LineStyle类型样式
	var lineStyle2={
		id:"L02",
		"v:stroke":{
			color:"#0cf",
			weight:"5",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};
	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path1 = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.Point(12949589,4835996),
        new sogou.maps.LatLng(39.986017,116.31049)
    ];
    var line1 = new sogou.maps.Polyline({
      path: path1,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 5,
	  //默认样式使用以上三个属性定义
	  //鼠标悬停样式使用lineStyle2
	  styles:[null,lineStyle2],
	  title:"line1",
	  map:map
    });

	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path2 = [
        new sogou.maps.LatLng(39.992792,116.325142),
        new sogou.maps.Point(12948589,4837096),
        new sogou.maps.LatLng(39.986017,116.31849)
    ];
    var line2 = new sogou.maps.Polyline({
      path: path2,
	  //默认样式使用lineStyle1
	  //鼠标悬停样式使用lineStyle2
	  styles:[lineStyle1,lineStyle2],
	  title:"line2",
	  map:map
    });
	//在div上添加鼠标事件
    var divFocus=document.getElementById("div_focus");
	divFocus.onmouseover=function(){
		//高亮line1
		line1.focus();
		//高亮line2
		line2.focus()
	};
	divFocus.onmouseout=function(){
		//取消高亮
		line1.blur();
		line2.blur()
	};

代码解析

设置普通和带箭头的两种线样式。

    var myLatLng = new sogou.maps.LatLng(39.988176,116.319404);
	//定义LineStyle类型样式
	var lineStyle1={
		id:"L01",
		"v:stroke":{
			color:"#f00",
			weight:"3",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};
	//定义带箭头的LineStyle类型样式
	var lineStyle2={
		id:"L02",
		"v:stroke":{
			color:"#0cf",
			weight:"5",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};

绘制两条折线。在styles参数中设置鼠标悬停样式。

	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path1 = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.Point(12949589,4835996),
        new sogou.maps.LatLng(39.986017,116.31049)
    ];
    var line1 = new sogou.maps.Polyline({
      path: path1,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 5,
	  //默认样式使用以上三个属性定义
	  //鼠标悬停样式使用lineStyle2
	  styles:[null,lineStyle2],
	  title:"line1",
	  map:map
    });

	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path2 = [
        new sogou.maps.LatLng(39.992792,116.325142),
        new sogou.maps.Point(12948589,4837096),
        new sogou.maps.LatLng(39.986017,116.31849)
    ];
    var line2 = new sogou.maps.Polyline({
      path: path2,
	  //默认样式使用lineStyle1
	  //鼠标悬停样式使用lineStyle2
	  styles:[lineStyle1,lineStyle2],
	  title:"line2",
	  map:map
    });

设置div事件。移上时使用focus()方法高亮两条折线,移出取消高亮。

	//在div上添加鼠标事件
    var divFocus=document.getElementById("div_focus");
	divFocus.onmouseover=function(){
		//高亮line1
		line1.focus();
		//高亮line2
		line2.focus()
	};
	divFocus.onmouseout=function(){
		//取消高亮
		line1.blur();
		line2.blur()
	};

完整代码

<!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 示例:画折线鼠标悬停高亮、以及调用focus()方法示例</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">
  //画折线鼠标悬停高亮
  //设置默认样式、鼠标悬停时样式
  //以及调用focus()方法示例
  function initialize() {
    var myLatLng = new sogou.maps.LatLng(39.988176,116.319404);
	//定义LineStyle类型样式
	var lineStyle1={
		id:"L01",
		"v:stroke":{
			color:"#f00",
			weight:"3",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};
	//定义带箭头的LineStyle类型样式
	var lineStyle2={
		id:"L02",
		"v:stroke":{
			color:"#0cf",
			weight:"5",
			endcap:"Round",
			opacity:"75%",
			endArrow:"Classic",
			endarrowlength:"long",
			endarrowwidth:"wide"
		}
	};
    var myOptions = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: sogou.maps.MapTypeId.ROADMAP
    };

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

	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path1 = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.Point(12949589,4835996),
        new sogou.maps.LatLng(39.986017,116.31049)
    ];
    var line1 = new sogou.maps.Polyline({
      path: path1,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 5,
	  //默认样式使用以上三个属性定义
	  //鼠标悬停样式使用lineStyle2
	  styles:[null,lineStyle2],
	  title:"line1",
	  map:map
    });

	//坐标可以是经纬度坐标,也可以是搜狗坐标
    var path2 = [
        new sogou.maps.LatLng(39.992792,116.325142),
        new sogou.maps.Point(12948589,4837096),
        new sogou.maps.LatLng(39.986017,116.31849)
    ];
    var line2 = new sogou.maps.Polyline({
      path: path2,
	  //默认样式使用lineStyle1
	  //鼠标悬停样式使用lineStyle2
	  styles:[lineStyle1,lineStyle2],
	  title:"line2",
	  map:map
    });
	//在div上添加鼠标事件
    var divFocus=document.getElementById("div_focus");
	divFocus.onmouseover=function(){
		//高亮line1
		line1.focus();
		//高亮line2
		line2.focus()
	};
	divFocus.onmouseout=function(){
		//取消高亮
		line1.blur();
		line2.blur()
	};

  }
</script>
</head>
<div id="div_focus" style="width:630px;background:#0f0;font-size:25px;margin:5px;cursor:pointer;" >鼠标移到这儿让地图上的线高亮,或者鼠标移到线上看看</div>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码