我如何解析我的几何字段在谷歌融合表缩放到多边形坐标在谷歌地图API V3
How can I parse my geometry field in Google Fusion Tables to zoom to polygon coordinates in Google Maps API V3?
我这里有一个使用Google的Fusion Tables and Maps API V3的功能地图。除了我的3个多边形外,一切都可以工作,当我想出下一步时,我会修复它。有人问我是否可以让每个复选框选择缩放到有问题的多边形。我尝试过使用geoXml.parseKmlString()
方法和谷歌的可视化API来完成这个请求,正如许多其他帖子所建议的那样,但没有运气。我对JavaScript还是个新手,对Google的geoxml3 KML处理器和可视化API也是个新手。
我已经看了各种各样的例子,试图弄清楚这一点,我能找到的最接近的是:
组装图
我无法让它在我的代码中工作。
有没有人有任何建议,我如何能从汇编地图的代码合并到我的代码工作与功能代码我已经到位?
感谢您的宝贵时间。
我现在的代码如下:
var map;
var catchSD8 = new google.maps.LatLng(50.0267110, -116.907234);
var tableId = '1yc4wo1kBGNJwpDm6e-eJY_KL1YhQWfftjhA38w8';
var varID = [
"Adam Robertson Elementary",
"Blewett Elementary",
"Brent Kennedy",
"Canyon-Lister Elementary",
"Crawford Bay Elementary/Secondary",
"Erickson Elementary",
"Hume Elementary",
"JV Humphries Elementary",
"JV Humphries Secondary",
"Jewett Elementary",
"Kootenay Lake",
"Lower Kootenay Band",
"LV Rogers Secondary",
"Mount Sentinel Middle",
"Mount Sentinel Secondary",
"Prince Charles Secondary",
"Redfish Elementary",
"Rosemont Elementary",
"Salmo Elementary",
"Salmo Secondary",
"Trafalgar Middle School",
"W.E. Graham Community Elementary",
"W.E. Graham Community Secondary",
"Winlaw Elementary",
"Yahk Elementary"
];
function initialize() {
var myOptions = new google.maps.Map(document.getElementById('map_canvas'), {
center: catchSD8,
zoom: 8,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, tableId, map);
var mySchool;
var limit = varID.length;
for(var i=0; i < limit; i++){
mySchool = document.getElementById(varID[i]);
(function(schl,lyr,tbl,mp){
google.maps.event.addDomListener(schl,'click', function() {
filterMap(lyr,tbl,mp);
});
}(mySchool,layer,tableId,map));
}
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Location',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var schools = document.getElementsByName('school');
for (var i = 0, school; school = schools[i]; i++) {
if (school.checked) {
var schoolName = school.value.replace(/'/g, '''''');
filter.push("'" + schoolName + "'");
}
}
var where = '';
if (filter.length) {
where = "School IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
首先需要加载使用的库:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
</script>
也复制函数zoom2query()
和zoomTo()
到你的文档中。
在函数filterMap()中调用zoomToQuery(),并将查询作为参数:
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
zoom2query('SELECT Location from '+tableId+ ' where '+where);
//continue with your code
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- 如何缩放地图框传单中的标记单击事件
- 谷歌地图-显示基于缩放级别的融合表图层