腾讯地图JS2.0版本,鼠标移入移出多边形,多边形颜色改变。
鼠标移入多变型:
鼠标移出多边形:
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图-简单地图示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 14
});
var path = [
new qq.maps.LatLng(39.926516, 116.389366),
new qq.maps.LatLng(39.924870, 116.403270),
new qq.maps.LatLng(39.918090, 116.406274),
new qq.maps.LatLng(39.909466, 116.397863),
new qq.maps.LatLng(39.913021, 116.387134)
];
var polygon = new qq.maps.Polygon({
map: map,
path: path,
strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
fillColor: qq.maps.Color.fromHex("#FFFFFF", 0.5)
});
qq.maps.event.addListener(polygon, 'mouseover', function() { // mouseout
//--事件函数
console.log('mouseover');
polygon.setMap(map);
polygon.setVisible(true);
polygon.setFillColor(qq.maps.Color.fromHex("#FFFFFF", 0.5)); // 'rgba(41,91,255,0.16)' "#0f0"
});
qq.maps.event.addListener(polygon, 'mouseout', function() { // mouseout
//--事件函数
console.log('mouseout');
polygon.setMap(map);
polygon.setVisible(true);
polygon.setFillColor(qq.maps.Color.fromHex("#cccccc", 0.2)); // 'rgba(41,91,255,0.16)' "#0f0"
});
</script>
</body>
</html>