- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个 .Net Core 应用程序,在我的一个 View 中,我想要一个 Google map ,我希望能够在其中绘制动态多段线。
我在我的 View 中包含了一个谷歌地图,如下所示:
<div class="col-md-6 col-lg-6">
<h3>My Google Maps Demo</h3>
<div id="map"></div>
</div>
<script>
function initMap() {
var center = { lat: 55.92965249, lng: 12.47840507 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: uluru
});
$.get()
$.post()
route.setMap(map);
}
</script>
在我的 _Layout.cshtml 中我有:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=...api key...&callback=initMap">
</script>
所有这些都按预期工作,但我不确定这是否是在 .Net Core 应用程序中显示 Google map 的正确方式?
此外,我希望能够在我的 Google map 实现中绘制动态路线。这是通过以下代码完成的
var route = new google.maps.Polyline({
path: routeCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
其中 routeCoordinates 是坐标列表:
var routeCoordinates = [
{lat: 55.92965249, lng: 12.47840507},
{lat: 55.92941392, lng: 12.47832253},
{lat: 55.92918626, lng: 12.47824027},
...
{lat: 55.91474539, lng: 12.47145191},
{lat: 55.91450191, lng: 12.47139283},
{lat: 55.91425197, lng: 12.47134614}
]
以上所有内容当然是在我的 Index.cshtml 中静态完成的。
那么有没有更好的方法呢?我将如何使用我的 Controller 动态地(希望如此)添加和删除行?我希望是这样的:
public async Task<IActionResult> Index()
{
return View(await _context.Trips.ToListAsync());
//context is my db
}
现在它不存在,但我将通过我的 EF 实现从我的上下文中获取坐标列表。
自从我发布这篇文章后,我继续了一点,现在我有一个 PartialView,我想在单击表格行时加载它:
@model IEnumerable<LngLat>
<div class="col-md-6 col-lg-6">
<h3>My Google Maps Demo</h3>
<div id="map"></div>
</div>
<script>
function initMap() {
var center = { lat: 55.92965249, lng: 12.47840507 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: center
});
//$.get();
//$.post();
routeCoordinates = @Model;
var route = new google.maps.Polyline({
path: routeCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
route.setMap(map);
}
</script>
还有我的:
// table header and so forth..
<tbody>
@foreach (var item in Model)
{
<tr class="trips" data-id="@item.TripID" data-url="@Url.Action("ExpandMap", "Trip")">
<td>
@Html.DisplayFor(modelItem => item.DeviceID)
</td>
<td>
@Html.DisplayFor(modelItem => item.StartTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.Duration)
</td>
<td>
@Html.DisplayFor(modelItem => item.StartLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.EndLocation)
</td>
</tr>
}
</tbody>
<div id="partialMap"></div>
在我的:
$('.trips').each(function (i, e) {
var _this = $(this);
var element = $(e).children('td');
element.click(function () {
//console.log("Clicked! " + _this.data('url') + " " + _this.data('id'));
$("#partialMap").load(_this.data('url'), { id: _this.data('id') }, function () {
$("#partialMap").slideDown('200');
});
});
});
最后是我的 Controller 和 ExpandMap 函数:
public IActionResult ExpandMap(int id)
{
var trip = _context.Trips.SingleOrDefault(t => t.TripID == id);
List<LngLat> routeCoordinates = new List<LngLat>
{
new LngLat() { lat = 55.92965249, lng = 12.47840507},
new LngLat() { lat = 55.92941392, lng = 12.47832253},
...
new LngLat() { lat = 55.91450191, lng = 12.47139283},
new LngLat() { lat = 55.91425197, lng = 12.47134614}
};
string routeCoordinatesJS = JsonConvert.SerializeObject(routeCoordinates, Formatting.None, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore });
return PartialView("MapPartialView", routeCoordinatesJS);
}
但是当我运行代码时,我得到:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
最佳答案
您可以将上下文导出到经纬度列表
public class LngLat
{
public double lat { get; set; }
public double lng { get; set; }
}
public async Task<IActionResult> Index()
{
List<LngLat> routeCoordinates = await _context.Trips.Select(c=> new LngLat {lat = c.latitude, lng = c.longitude })
//Serialize your routeCoordiamte with Json.Net
string routeCoordinatesJs = JsonConvert.SerializeObject(routeCoordinates, Formatting.None, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore })
return View(routeCoordinatesJs);
}
在你的 View() 中:
var routeCoordinates = @Model
关于c# - 将 Google map 包含在 .Net Core 中的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40787998/
这里的这个问题对 updating Google Sheets charts linked to Google slides 有一个简洁的解决方案. function onOpen() { var
我正在尝试将 Google 表单添加到 Google 类作业中,但似乎不可能。 首先,它在这里 ( https://developers.google.com/classroom/reference/
出于某种原因,无论我做什么以及我如何尝试,这个日期格式化程序都不起作用。工具提示仍然显示错误的格式。你可以试试代码here . 在代码中我必须注释掉 formatter.format(dataTabl
我目前正在使用访问 token 和刷新 token 从 Google Analytics Reporting API (v4) 中提取数据。当我致力于自动从 Google Analytics 中提取数
我已在 Google 云端硬盘中创建了一个文件夹,例如测试一下,放入3个文件 a.jpg, b.jpg, c.jpg 我希望在同一帐户下的 Google 电子表格中访问文件,例如生成图像文件的链接,可
电子表格 A 是欢迎新移民来到我们小镇的团队的主数据源。它里面有大量非常敏感的数据,不能公开,哪怕是一点点。 (我们谈论的是 child 的姓名和出生日期以及他们在哪里上学……保证电子表格 A 的安全
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格? 我正在寻找一个脚本,用于使用 Google Apps 脚本
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格? 我正在寻找一个脚本,用于使用 Google Apps 脚本
尝试检索存储在 google firebase 中名为条目的节点下的表单条目,并使用谷歌工作表中的脚本编辑器附加到谷歌工作表。 我已将 FirebaseApp 库添加到谷歌表脚本编辑器。然后我的代码看
是否可以将我的 Web 应用程序的登录限制为仅限 google 组中的帐户? 我不希望每个人都可以使用他们的私有(private) gmail 登录,而只能使用我的 google 组中的用户。 最佳答
我们想使用 Google 自定义搜索实现 Google 附加链接搜索框。在谷歌 documentation , 我发现我们需要包含以下代码来启用附加链接搜索框 { "@context"
我想将特定搜索词的 Google 趋势图表添加到我的 Google Data Studio 报告中,但趋势不是数据源列表中的选项。我也找不到嵌入 JavaScript 的选项。是否可以将趋势图表添加到
是否可以将文件从 Google Drive 复制到 Google Cloud Storage?我想它会非常快,因为两者都在类似的存储系统上。 我还没有看到有关无缝执行此操作的任何方法的任何信息,而无需
之间有什么区别 ga('send', 'pageview', { 'dimension1': 'data goes here' }); 和 ga('set', 'dimension1', 'da
我正在尝试记录每个博客站点作者的点击率。 ga('send', 'pageview'); (in the header with the ga code to track each page) ga(
我设置了 Google Tag Manager 和 2 个数据层变量:一个用于跟踪用户 ID,传递给 Google Analytics 以同步用户 session ,另一个用于跟踪访问者类型。 在使用
我在我们的网站上遇到多个职位发布的问题。 我们在加拿大多个地点提供工作机会。所有职位页面都包含一个“LD+JSON ”职位发布的结构化数据,基于 Google 的职位发布文档: https://dev
公司未使用 Google 套件,使用个人(消费者)帐户(甚至是 Google 帐户)违反公司政策。 需要访问 Google Analytics - 没有 Google 帐户是否可能? 谢谢 最佳答案
我想分析人们使用哪些搜索关键字在 Play 商店中找到我的应用。 那可能吗?我怎么能这样做? 最佳答案 自 2013 年 10 月起,您可以关联您的 Google Analytics(分析)和 Goo
Google Now 和 Google Keep 中基于时间和位置的提醒与 Google Calendar 事件提醒不同。是否有公共(public) API 可以访问 Now 和 Keep 中的这些事
我是一名优秀的程序员,十分优秀!