我已在文档中的每个地方搜索过,以解释我如何仅显示融合表的给定区域的标记。
目前所有标记都出现在地图上:
JSFiddle (note jsfiddle wont load the uri from website so markers wont show)
如果您点击融合表/谷歌地图的某个区域,我会按预期弹出区域名称,但我不想最初显示任何标记。当点击融合表/地图的某个区域时,我希望它仅显示该给定区域的标记,而不是整个地图。
这是我从Web Api添加标记到地图的方法:
var uri = 'http://mountainsandweather.azurewebsites.net/api/Mountains';
$(document).ready(function () {
//Get web api json data
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of mountains.
$.each(data, function (key, item) {
// Add a list item for the mountain.
$('<li>', { text: formatItem(item) }).appendTo($('#mountains'));
//Put seperate data fields into one variable
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
//Add info window to each marker
var infowindow = new google.maps.InfoWindow({
content: formatItemInfoWindow(item)
});
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: formatItemInfoWindow(item.Name),
infowindow: infowindow
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
//this.infowindow.close(); //not working correctly info windows still show
this.infowindow.open(map, marker);
});
});
});
});
function formatItemInfoWindow(item) {
return item.Name + '<br />' + item.Height_ft + '<br />' + item.humidity + '<br />' + item.snowCover + '<br />' + item.temperature;
}
function formatItem(item) {
return item.Latitude +', '+ item.Longitude;
}
}
我确实在文档中看到了可以添加到融合表的where
语句。像这样:
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3'
where: //not sure if I could use this or what to put.
},
然而,来自Web Api的数据并未划分为特定区域,它只是一长串的纬度和经度列表。像这样:
<Mountain>
<Height_ft>2999</Height_ft>
<Height_m>914</Height_m>
<ID>c1</ID>
<Latitude>57.588007</Latitude>
<Longitude>-5.5233564</Longitude>
<Name>Beinn Dearg</Name>
<humidity>0.81</humidity>
<snowCover>4.99</snowCover>
<temperature>63</temperature>
</Mountain>
google是否有将融合表几何与坐标混合的方法?显示给定区域的所有标记的简单方法?或者,任何人都可以想到这样做的方法吗?
需要一些关于webapi的额外细节:
private MountainContext db = new MountainContext();
// GET: api/Mountains
public IQueryable<Mountain> GetMountains()
{
return db.Mountains;
}
// GET: api/Mountains/5
[ResponseType(typeof(Mountain))]
public IHttpActionResult GetMountain(string id)
{
Mountain mountain = db.Mountains.Find(id);
if (mountain == null)
{
return NotFound();
}
return Ok(mountain);
}
public IQueryable<Mountain> GetMountainByName(string name)
{
return db.Mountains.Where(n => string.Equals(n.Name, name));
}
答案 0 :(得分:3)
不幸的是,FusionTablesLayer中没有containsLocation函数。
一种解决方案是从FusionTablesLayer创建Google Maps Polygon,允许我们使用containsLocation
来确定是否将标记添加到地图中。
首先我们需要坐标来创建多边形。我们可以使用google.visualization.Query
从融合表中获取所选区域的坐标:
function getMountainPolygonFromFusionTable(label) {
// Return a new promise.
return new Promise(function(resolve, reject) {
var sql = encodeURIComponent("SELECT 'geometry' FROM 11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3 WHERE label ='" + label + "'");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);
query.send(function (response) {
var data = response.getDataTable().getValue(0, 0);
// Create a XML parser
if (window.DOMParser) {
var parser = new DOMParser();
var kml = parser.parseFromString(data, "text/xml");
} else {
var kml = new ActiveXObject("Microsoft.XMLDOM");
kml.loadXML(data);
}
// Get the coordinates of Mountain Areas
var latLngs = kml.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue.split(' ');
var mountainPolygonLatLngs = [];
for (var i = 0; i < latLngs.length; i++) {
var latLng = latLngs[i].split(',');
mountainPolygonLatLngs.push(new google.maps.LatLng(latLng[1], latLng[0]));
}
// Create the polygon
mountainPolygons = new google.maps.Polygon({
paths: mountainPolygonLatLngs,
fillColor: 'transparent',
strokeColor : 'transparent'
});
resolve(mountainPolygons);
});
});
}
然后我们只是遍布山脉,检查所选区域是否包含山峰:
// On mountain area click
google.maps.event.addListener(layer, 'click', function(event) {
// Clear all markers
while(markers.length) {
markers.pop().setMap(null);
}
// Get Polygon from FustionTable
getMountainPolygonFromFusionTable(event.row.label.value).then(function(mountainPolygons) {
// Loop through the mountains
for(var i = 0; i < mountains.length; i++) {
// Get the mountain LatLng
var mountain = mountains[i];
var mountainLat = mountain.getElementsByTagName("Latitude")[0].childNodes[0].nodeValue;
var mountainLng = mountain.getElementsByTagName("Longitude")[0].childNodes[0].nodeValue;
var mountainLatLng = new google.maps.LatLng(mountainLat, mountainLng);
// If mountain is in the selected polygon, create a marker for it.
if (google.maps.geometry.poly.containsLocation(mountainLatLng, mountainPolygons)) {
// @todo set infowindow, title...
var marker = new google.maps.Marker({
position: mountainLatLng,
title: 'Marker info here',
});
marker.setMap(map);
markers.push(marker);
}
}
});
});
这是JSON版本:
google.maps.event.addListener(layer, 'click', function(event) {
// Clear all markers
while(markers.length) {
markers.pop().setMap(null);
}
// Get Polygone from FustionTable
getMountainPolygonFromFusionTable(event.row.label.value).then(function(mountainPolygons) {
$.getJSON(uri).done(function (data) {
// On success, 'data' contains a list of mountains.
$.each(data, function (key, item) {
//Put seperate data fields into one variable
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
if (google.maps.geometry.poly.containsLocation(latLng, mountainPolygons)) {
// @todo set infowindow, title...
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker info here',
});
marker.setMap(map);
markers.push(marker);
}
});
});
});
});