我一直在使用 Google 电子表格和 Fusion Tables 来创建地图,但我想做一些涉及更多编码的事情,希望你能帮助改进我的方法。
本质上,我使用电子表格从英国 NHS 本地站点抓取 GP 和 Chemist 数据,并使用 Fusion Tables 对其进行地理编码(https://www.google.com/fusiontables/DataSource?docid=1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4)。
我现在要做的是使用 Google Maps Api 发布 Fusion Table 数据,然后添加控件,以便用户可以过滤掉他们不想要的位。我知道如何创建自定义按钮,但我无法解决的是如何在单击按钮时创建查询。
这是非常有用的东西,所以如果你能提供帮助,那就太好了。
到目前为止,我的努力如下:
http://davidelks.com/MashupTests/gmapsTest.html
<script type="text/javascript">
var map, infoWindow;
var toggle_doctors = 'false';
var toggle_chemists = 'false';
$(document).ready(function(){
infoWindow = new google.maps.InfoWindow({});
map = new GMaps({
div: '#map',
lat: 53.023098,
lng: -2.197793,
zoom: 11
});
var doctors = map.addControl({
position: 'left_bottom',
text: 'GPs',
style: {
margin: '1px',
padding: '1px 6px',
border: 'solid 1px #717B87',
width: '85px',
background: '#99ff99'
},
events: {
click: function(){
if (toggle_doctors == 'true'){
toggle_doctors = 'false';
doctors.style.backgroundColor = '#ffffff';
}
else {
toggle_doctors = 'true';
doctors.style.backgroundColor ='#99ff99';
}
}
}
});
var chemists = map.addControl({
position: 'left_bottom',
text: 'Late chemists',
style: {
margin: '1px',
width: '85px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#9999ff'
},
events: {
// toggle button between white and colour
click: function(){
if (toggle_chemists == 'true'){
toggle_chemists = 'false';
chemists.style.backgroundColor = '#ffffff';
}
else {
toggle_chemists = 'true';
chemists.style.backgroundColor ='#9999ff';
}
}
}
});
map.loadFromFusionTables({
query: {
select: '*',
from: '1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4',
where: 'TYPE == \'GP\''
},
events: {
click: function(point){
infoWindow.setPosition(point.latLng);
infoWindow.open(map.map);
}
}
});
});//end of code block
</script>
<div id="map" style="height: 500px; width: 300px; border: 1px;"></div>