Google maps api 3 基于MVC5的谷歌地图API
我在尝试为地图上的多个地址生成多个标记时遇到问题。基本上,我从数据库中提取地址,让GoogleLocationService()来检测它的坐标。虽然我不确定如何为视图(.CSHTML)传递多个纬度和经度。 我还是MVC新手,所以在将值从控制器传递到视图时有点麻烦。有什么建议吗 在我的代码(控制器)上: 在我的(车型)上时: 然后是我的(.CSHTML):Google maps api 3 基于MVC5的谷歌地图API,google-maps-api-3,asp.net-mvc-5,Google Maps Api 3,Asp.net Mvc 5,我在尝试为地图上的多个地址生成多个标记时遇到问题。基本上,我从数据库中提取地址,让GoogleLocationService()来检测它的坐标。虽然我不确定如何为视图(.CSHTML)传递多个纬度和经度。 我还是MVC新手,所以在将值从控制器传递到视图时有点麻烦。有什么建议吗 在我的代码(控制器)上: 在我的(车型)上时: 然后是我的(.CSHTML): @foreach(模型中的变量位置) { var latlng=new google.maps.latlng(@Model.Latitude
@foreach(模型中的变量位置)
{
var latlng=new google.maps.latlng(@Model.Latitude,@Model.longtude);
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
标题:“纬度:”+latlng.Ya+“经度:”+latlng.Za,
真的,
图标:图像
});
infoWindow=新建google.maps.infoWindow({
内容:“--测试地址--”
});
信息窗口。打开(地图、标记);
geocoder=新的google.maps.geocoder();
//拖动标记时更新邮政地址
google.maps.event.addListener(标记'click',函数(){//dragend
geocoder.geocode({latLng:marker.getPosition()},函数(响应){
if(responses&&responses.length>0){
infoWindow.setContent(
“”+响应[0]。格式化的\u地址
+“
”
+“纬度:”+marker.getPosition().lat()+“”
+“经度:”+marker.getPosition().lng()+“”
);
信息窗口。打开(地图、标记);
}否则{
警报('错误:谷歌地图无法确定此位置的地址');
}
});
map.panTo(marker.getPosition());
});
//拖动时关闭标记窗口
google.maps.event.addListener(标记'dragstart',函数(){
信息窗口。关闭(地图、标记);
});
}
public ActionResult Index() {
VerifyUserModel user = new VerifyUserModel();
user.UserName = "Kenneth Baleda";
user.AccountLevel = "MGR";
foreach (string w in a.Companies.Where(x => x.IsActive == "Active").Where(x => x.CompanyName != "tbd").Where(x => x.FullCompanyName != "Test")
.Where(x => x.FullCompanyName != "")
.Select(x => x.Address).ToArray())
{
user.CompanyAddress = w;
var location = new GoogleLocationService();
var point = location.GetLatLongFromAddress(w);
user.Latitude = point.Latitude;
user.Longtitude = point.Longitude;
}
return View(user);
}
public class VerifyUserModel
{
public string UserName { get; set; }
public string AccountLevel { get; set; }
public double Latitude { get; set; }
public double Longtitude { get; set; }
public string CompanyAddress { get; set; }
}
@foreach (var place in Model)
{
<text>
var latlng = new google.maps.LatLng(@Model.Latitude, @Model.Longtitude);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Latitude: ' + latlng.Ya + ' Longitude :' + latlng.Za,
draggable: true,
icon: image
});
infoWindow = new google.maps.InfoWindow({
content:"-- Test Address --"
});
infoWindow.open(map, marker);
geocoder = new google.maps.Geocoder();
//Update postal address when the marker is dragged
google.maps.event.addListener(marker, 'click', function () { //dragend
geocoder.geocode({ latLng: marker.getPosition() }, function (responses) {
if (responses && responses.length > 0) {
infoWindow.setContent(
"<div style=\"font-size:smaller;\">" + responses[0].formatted_address
+ "<br />"
+ "Latitude: " + marker.getPosition().lat() + " "
+ "Longitude: " + marker.getPosition().lng() + "</div>"
);
infoWindow.open(map, marker);
} else {
alert('Error: Google Maps could not determine the address of this location.');
}
});
map.panTo(marker.getPosition());
});
// Close the marker window when being dragged
google.maps.event.addListener(marker, 'dragstart', function () {
infoWindow.close(map, marker);
});
</text>
}