此代码在国家/地区绘制多边形,当我的光标指向多边形的国家/地区颜色正在发生变化但是当我点击一个国家/地区总是提醒最后一个国家/地区名称时,我遇到了eventlistener的问题我的错误需要帮助。
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
var country= new Array();
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
country[i] = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[0],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[0],
fillOpacity: 0
});
google.maps.event.addListener(country[i], 'mouseover', function () {
this.setOptions({ fillOpacity: 0.2 });
});
google.maps.event.addListener(country[i], 'mouseout', function () {
this.setOptions({ fillOpacity: 0 });
});
google.maps.event.addListener(country[i], "click", function (event) {
alert(rows[i][0]);
});
country[i].setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分:0)
您的点击监听器始终提醒相同的数据:
google.maps.event.addListener(country[i], "click", function (event) {
alert(rows[i][0]);
});
rows [i] [0]将始终是相同的值,因为当您循环退出时,我将始终引用最后一个值。
解决这个问题的一种方法是使用function closure,创建一个函数:
createPolygonClidkHandler(polygon, text) {
google.maps.event.addListener(polygon, "click", function (event) {
alert(text);
});
然后使用它来保持多边形及其相关文本的“闭包”功能,如下所示:
function drawMap(data) {
var rows = data['rows'];
var country= new Array();
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
country[i] = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[0],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[0],
fillOpacity: 0
});
google.maps.event.addListener(country[i], 'mouseover', function () {
this.setOptions({ fillOpacity: 0.2 });
});
google.maps.event.addListener(country[i], 'mouseout', function () {
this.setOptions({ fillOpacity: 0 });
});
createPolygonClidkHandler(country[i], rows[i][0]);
country[i].setMap(map);
}
}
}