Google地图融合表盘旋并点击 [英] Google maps fusion tables hover and click
问题描述
我有以下来自google的修改代码，它显示了来自我的一个融合表的多边形地图。融合表有两个字段 - id&几何。多边形显示很好，悬停效果很好。
我的问题是如何让content-window div显示点击多边形的ID号。测试监听器当前在content-window div中显示'test'文本，但我无法获得它显示融合表查询中单击的多边形的ID（var query ='SELECT id，geometry FROM '+'MYMAPID';）
< script type =text / javascriptsrc =https：// maps。 google.com/maps/api/js?sensor=false\"></script>
< script type =text / javascript>
var map;
函数initialize（）{
var myOptions = {
zoom：6，
center：new google.maps.LatLng（32.157435，-82.907123），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（'map-canvas'），myOptions）;
//初始化JSONP请求
var script = document.createElement（'script'）;
var url = ['https://www.googleapis.com/fusiontables/v1/query？'];
url.push（'sql ='）;
var query ='SELECT id，geometry FROM'+'MYMAPID';
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）;
}
函数drawMap（data）
{
var rows = data ['rows'];
for（var i in rows）
{
newCoordinates = constructNewCoordinates（rows [i] [1] ['geometry']）;
var country = new google.maps.Polygon
（{
paths：newCoordinates，
strokeColor：＃ff0000，
strokeOpacity：1，
strokeWeight：1，
fillOpacity：0.3
}）;
google.maps.event.addListener（country，'mouseover'，function（）{
this.setOptions（{fillOpacity：1}）;
}）;
google.maps.event.addListener（country，'mouseout'，function（）{
this.setOptions（{fillOpacity：0.3}）;
}）;
//测试监听器
google.maps.event.addListener（country，'click'，function（）{
document.getElementById（'content-window'）。innerHTML ='test' ;
}）;
country.setMap（map）;
$ b函数constructNewCoordinates（多边形）
{
var newCoordinates = [];
var coordinates = polygon ['coordinates'] [0];
for（var i in coordinates）
{
newCoordinates.push（
new google.maps.LatLng（coordinates [i] [1]，coordinates [i] [0] ））;
}
返回newCoordinates;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
）
编辑：
我以为我可以接受@geocodezip帮助我的id并使用听众：
google.maps.event.addListener（country，'click'，function（）{
getAreas（id）;
}）;
...将它传递给下面的函数，让它从一个
$ p $函数getAreas
//初始化JSONP请求
var script = document.createElement（'script'）;
var url = ['https://www.googleapis.com/fusiontables/v1/query？'];
url.push（'sql ='）;
var query ='SELECT name FROM'+'MY TABLE 2'+'WHERE id ='+ id;
var encodedQuery = encodeURIComponent（query）;
url.push（encodedQuery）;
url.push（'& callback = showAreas'）;
url.push（'& key = AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'）;
script.src = url.join（''）;
var body = document.getElementsByTagName（'body'）[0];
body.appendChild（script）;
function showAreas（data）
{
var rows = data ['rows'];
for（var i in rows）
{
var name = rows [i] [0];
document.getElementById（'content-window'）。innerHTML = name;
}
}
这虽然不起作用。有人知道我做错了什么？
谢谢
如果您从此示例开始，则ID为：
var id = rows [i] [0];
为了使它与国家多边形相关联，我将使用函数closure： / p>
函数createPolygon（country，id）
{
google.maps.event.addListener（country，' mouseover'，function（）{
this.setOptions（{fillOpacity：1}）;
}）;
google.maps.event.addListener（country，'mouseout'，function（）{
this.setOptions（{fillOpacity：0.3}）;
}）;
google.maps.event.addListener（country，'click'，function（）{
document.getElementById（'content-window'）。innerHTML = id;
}）;
}
I have the following modified code from google that displays a map with polygons from one of my fusion tables. The fusion table has two fields - id & geometry. The polygons display fine with a hover that works well.
My question is how do get the content-window div to display the id number of the clicked polygon. The test listener currently displays the 'test' text in the content-window div when clicked but i can't get it to show the id of the clicked polygon that is in the fusion tables query (var query = 'SELECT id,geometry FROM ' + 'MYMAPID';)
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(32.157435,-82.907123),
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 id,geometry FROM ' + 'MYMAPID';
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'];
for (var i in rows)
{
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
var country = new google.maps.Polygon
({
paths: newCoordinates,
strokeColor: "#ff0000",
strokeOpacity: 1,
strokeWeight: 1,
fillOpacity: 0.3
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
//test listener
google.maps.event.addListener(country, 'click', function() {
document.getElementById('content-window').innerHTML ='test';
});
country.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>
Thanks:)
EDIT:
I thought i could then take the id that @geocodezip helped me with and using the listener:
google.maps.event.addListener(country, 'click', function() {
getAreas(id);
});
...pass it to the functions below to get it to pull multiple 'name' fields from a seperate Fusion Table that have that id.
function getAreas(id)
{
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name FROM ' + 'MY TABLE 2' + 'WHERE id=' + id;
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=showAreas');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function showAreas(data)
{
var rows = data['rows'];
for (var i in rows)
{
var name = rows[i][0];
document.getElementById('content-window').innerHTML = name;
}
}
This doesn't work though. Anybody got any idea what i'm doing wrong?
Thanks
If you started from this example the id is:
var id = rows[i][0];
To get that to be associated with the "country" polygon, I would use a function closure:
function createPolygon(country,id)
{
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
google.maps.event.addListener(country, 'click', function() {
document.getElementById('content-window').innerHTML = id;
});
}
这篇关于Google地图融合表盘旋并点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
