更改谷歌,地图多边形颜色/填充上点击
问题描述:
我有下面的代码已被传递给我,并创建多边形:更改谷歌,地图多边形颜色/填充上点击
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-36.42,145.710);
var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create polygon overlays from site data in file data.js included above
// Overlays are defined by a set of coordinates
// We will also be setting up an infowindow with the site name
// The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
var overlay;
var number_of_overlays = 29;
for (var k = 0; k < number_of_overlays; k++) {
var pk = primaryKeys[k];
var verticesArray = new Array((eval("siteVertices_" + pk).length)/2);
var m = 0;
var centroidLat = 0;
var centroidLng = 0;
for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
{
verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
m = m + 1;
centroidLat += eval("siteVertices_" + pk)[n];
centroidLng += eval("siteVertices_" + pk)[n + 1];
}
var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
var overlay = new google.maps.Polygon({
paths: verticesArray,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.20,
position: cent,
map:map });
attachInfoWindow(overlay, k);
}
}
function attachInfoWindow(overlay, number) {
var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); });
google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); });
}
</script>
该代码使用data.js,这看起来很像这样的:
var primaryKeys = [1, 2, 3];
var siteNames = ['area_1', 'area_2', 'area_3'];
var siteVertices_1 = [-36.42716187286321, 145.7040742777405, -36.426678448311414, 145.70408500657655, -36.42786542285944, 145.70926703439332, -36.428335891385544, 145.70912755952455];
var siteVertices_2 = [-36.42664391787113, 145.70415474401094, -36.42616912275949, 145.70439077840425, -36.42733884002687, 145.70942796693421, -36.427804995502726, 145.70927239881135];
var siteVertices_3 = [-36.42611732675347, 145.7044176004944, -36.42570295746138, 145.70467509255982, -36.42684246769319, 145.70961035714723, -36.42730862614943, 145.7094601534424];
当前,多边形是使用红色轮廓和填充创建的。我想添加一个行为,以便当用户单击多边形时,多边形变为“活动”,轮廓和填充变为黄色。
我不擅长JavaScript,我不知道如何去做这件事。我知道我需要为'点击'添加一个侦听器,但除此之外,我被卡住了。援助将不胜感激! MTIA。
答
我认为你必须传递给多边形对象一个新的PolygonOptions
通过调用这个方法:
setOptions(options:PolygonOptions).
你可以看到不同的选择在这里:http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions
在这个PolygonOptions
,那么你可以指定你想要Polygon
的颜色以及其他所有你想要改变的东西。
答
Kaspar Vesth几乎在那里。是的,你必须调用setOptions。但请记住,您不必每次都通过所有选项,只需传入您想要更改的选项即可。例如:
myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'});
// polygon is clicked
myPolygon.setOptions({strokeWeight: 6.0});
我们可以使用fillColor作为渐变吗?谢谢 – 2016-10-25 08:58:05
@FarzadCyrus:没有。 fillColor只采用CSS颜色。看看PolygonOptions https://developers.google.com/maps/documentation/javascript/reference?csw=1#PolygonOptions – thomax 2016-10-25 09:42:46
谢谢:)但我已经看过那个页面,但仍然想知道如何一些混合移动使用包含Google地图的HTML5/CSS3/JS等前端技术实际构建的应用程序能够使用渐变...干杯 – 2016-10-26 08:51:10