在Google地图上移动图像角度方向 [英] Move image angle direction on Google map
问题描述
我尝试使用此代码在Google地图上绘制数据此代码通过jquery生成表格并在Google地图上绘制数据，并在加载小内容窗口时显示在每个标记上
我试试这个代码
成功：函数（结果）{
var d = JSON.parse（result.d）.response;
console.log（JSON.parse（result.d）.response）;
console.log（JSON.stringify（result.d）.response）;
$（ ＃tabledata）。empty（）;
if （d.length > 0 ）{
$（ ＃tabledata）。append（
NoDateTimeStatusLongitudeLatitude）;
for （ var i = 0 ; i < d.length - 1 ; i ++）{
if （d [i]！== null ）{
$（ ＃tabledata）。append（ +
d [i] [ 0 ] + +
d [i] [ 1 ] + +
d [i] [ 2 ] + +
d [i] [ 3 ] + +
d [i] [ 4 ] + +
d [i] [ 5 ] + < span class =code-string>）;
状态= d [i] [ 2 ];
RegNo = d [i] [ 0 ];
latit = d [i] [ 4 ];
longi = d [i] [ 3 ];
}
}
}
其他 {
$（ ＃tabledata）。hide（）;
}
alert（d.length）;
var map;
// var markers;
debugger;
var latlng = new google.maps.LatLng（ 27 。 0895898 ， 69 。 0998546 ）;
调试器;
var myOptions = {
zoom： 8 ，
center： latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
调试器;
map = new google.maps.Map（document.getElementById（ map_canvas），myOptions）;
调试器;
调试器;
for （i = 0 ; i < ; d.length - 1 ; i ++）{
var data = d [i]
var myLatlng = new google.maps.LatLng（d [i] [ 4 ]，d [i] [ 3 ]）;
var marker = new google.maps.Marker（{
position：myLatlng ，
图标： / images / small car.png，
map ：map，
title：' 点击我'
} ）;
var infowindow = new google.maps.InfoWindow（{
content：' No：' + d [i] [ 0 ] + ' < br>状态：' + d [i] [ 2 ] + ' < br> Lat：' + d [i] [ 4 ] + ' 长：' + d [i] [ 3 ]
}）;
google.maps。 event .addListener（marker，' mouseclick'，function（）{
infowindow.open（map，marker，data）;
}）;
infowindow.open（地图，标记，数据）;
}
现在我想设置方向
表中的数据是
无状态日期时间经度纬度方向
BF 5 2016-09-23 15 ： 08 ： 38 。 000 65 。 1197 34 。 95387 88
BR 5 2016-09-23 15 ： 17 ： 26 。 000 65 。 068758 34 。 8639578 292
我尝试了什么：
现在我想移动图像到这个方向列我有这个代码但看起来很复杂我想通过jquery和更少的代码行来做这个
int angle = Convert.ToInt32（dataTable.Rows [ j] [Direction]。ToString（））;
img =target.gif;
DateTime sdatetime =
Convert.ToDateTime（dataTable.Rows [j] [DateTime]。ToString（））;
DateTime edatetime = DateTime.Now;
TimeSpan ddiff = edatetime.Subtract（sdatetime）;
int hddiff = ddiff.Days;
if（hddiff> 2）
img =images / google / bred.gif;
else if（hddiff> 1）
img =images /google/byellow.gif;
else if（Convert.ToDouble（dataTable.Rows [j] [Speed]。ToString（））== 0）
img =images / google / utr0.png;
else
{
img =images / google / bgreen.gif ;
if（angle == 0）
{
img =images / google / utg0。 png;
}
else if（angle> 0& angle< = 15）
{
img =images / google / utg15.png;
}
}
（<跨度类= 代码串> <跨度类= 代码串 >＃资料表）空（）;
if （d.length > 0 ）{
（ ＃tabledata ）.append（
NoDateTimeStatusLongitudeLatitude）;
for （ var i = 0 ; i < d.length - 1 ; i ++）{
if （d [i]！== null ）{
< blockquote>（ ＃tabledata）。append（ +
d [i] [ 0 ] + +
d [i] [ 1 ] + +
d [i] [ 2 ] + +
d [i] [ 3 ] + +
d [i] [ 4 ] + +
d [i] [ 5 ] + < span class =code-string>）;
状态= d [i] [ 2 ];
RegNo = d [i] [ 0 ];
latit = d [i] [ 4 ];
longi = d [i] [ 3 ];
}
}
}
其他 {
I try this code for plotting data on google map This code is generate table through jquery and plotting data on google map and also on load small content window is display on every marker
I try this code
success: function (result) {
var d = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response);
console.log(JSON.stringify(result.d).response);
$("#tabledata").empty();
if (d.length > 0) {
$("#tabledata").append(
"NoDateTimeStatusLongitudeLatitude");
for (var i = 0; i < d.length - 1; i++) {
if (d[i] !== null) {
$("#tabledata").append("" +
d[i][0] + " " +
d[i][1] + " " +
d[i][2] + " " +
d[i][3] + " " +
d[i][4] + "" +
d[i][5] + "");
Status = d[i][2];
RegNo = d[i][0];
latit = d[i][4];
longi = d[i][3];
}
}
}
else {
$("#tabledata").hide();
}
alert(d.length);
var map;
//var markers;
debugger;
var latlng = new google.maps.LatLng(27.0895898, 69.0998546);
debugger;
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
debugger;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
debugger;
debugger;
for (i = 0; i < d.length - 1; i++) {
var data = d[i]
var myLatlng = new google.maps.LatLng(d[i][4], d[i][3]);
var marker = new google.maps.Marker({
position: myLatlng,
icon: "/images/small car.png",
map: map,
title: 'Click me'
});
var infowindow = new google.maps.InfoWindow({
content: 'No:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][4] + 'Long:' + d[i][3]
});
google.maps.event.addListener(marker, 'mouseclick', function () {
infowindow.open(map, marker,data);
});
infowindow.open(map, marker,data);
}
now i want to set directions
data in table is
No Status Datetime Longitude Latitude Direction
BF 5 2016-09-23 15:08:38.000 65.1197 34.95387 88
BR 5 2016-09-23 15:17:26.000 65.068758 34.8639578 292
What I have tried:
now i want to move image according to this direction column i have this code but looks complicated i want to do this through jquery and less lines of code
int angle = Convert.ToInt32(dataTable.Rows[j]["Direction"].ToString());
img = "target.gif";
DateTime sdatetime =
Convert.ToDateTime(dataTable.Rows[j]["DateTime"].ToString());
DateTime edatetime = DateTime.Now;
TimeSpan ddiff = edatetime.Subtract(sdatetime);
int hddiff = ddiff.Days;
if (hddiff > 2)
img = "images/google/bred.gif";
else if (hddiff > 1)
img = "images/google/byellow.gif";
else if (Convert.ToDouble(dataTable.Rows[j]["Speed"].ToString()) == 0)
img = "images/google/utr0.png";
else
{
img = "images/google/bgreen.gif";
if (angle == 0)
{
img = "images/google/utg0.png";
}
else if (angle > 0 & angle <= 15)
{
img = "images/google/utg15.png";
}
}
("#tabledata").empty(); if (d.length > 0) {
("#tabledata").append( "NoDateTimeStatusLongitudeLatitude"); for (var i = 0; i < d.length - 1; i++) { if (d[i] !== null) {
("#tabledata").append("" + d[i][0] + " " + d[i][1] + " " + d[i][2] + " " + d[i][3] + " " + d[i][4] + "" + d[i][5] + ""); Status = d[i][2]; RegNo = d[i][0]; latit = d[i][4]; longi = d[i][3]; } } } else {
这篇关于在Google地图上移动图像角度方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
