GoogleマップのJavascript APIを使用して、自分のサイトでGoogleマップを取得することができました..そしてそれはうまく機能します...
各場所/車両には素晴らしいマーカーがあります。しかし問題は、各マーカーに名前を表示する必要があることです。SQL からデータを受け取り、緯度と経度の読み込みはうまく機能します。マーカーを変更するだけです。データベースからドライバー名、緯度、経度を取得します。マーカーにドライバー名を表示する必要があります。これらのデータはサイト (ドロップダウン リストから選択) に依存します。通話が記録されたら、最も近い技術をクライアントに送信する必要があります。
これは私がやったことです：
頭の中の私のスクリプト：
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false
&key=AIzaSyCRuaf5l3GKHKII8uG8TDUFW35xr34PgEw" type="text/javascript">
</script>
マップの私のdiv:
<asp:Panel ID="Panel1" runat="server">
<asp:Literal ID="js" runat="server"></asp:Literal>
<div id="map_canvas" style="width: 400px; height: 400px; margin-bottom: 2px;">
</div>
<br />
</asp:Panel>
そして、これは地図を表示し、位置を追加しています:
private void BuildScript(DataTable tbl)
{
string custLocationLat, custLocationLong;
String Locations = "";
string marker;
if (lblCustLatitude.Text == "")
custLocationLat = Convert.ToString(-26.172116);
else
custLocationLat = Convert.ToString(lblCustLatitude.Text);
if (lblCustLongtitude.Text == "")
custLocationLong = Convert.ToString(28.130557);
else
custLocationLong = Convert.ToString(lblCustLongtitude.Text);
marker = "var = new GMarker(new GPoint(" + custLocationLat + ", " + custLocationLong + "));";
foreach (DataRow r in tbl.Rows)
{
if (r["Latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["Latitude"].ToString();
string Longitude = r["Longitude"].ToString();
string markerPoints = r["DrivName"].ToString();
int i= 0;
Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
marker += Environment.NewLine + "var" + i + " = new GMarker(new GPoint(" + Latitude + ", " + Longitude + "));";
i++;
}
js.Text = @"<script type='text/javascript'>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(" + custLocationLat + "," + custLocationLong + @"), 8);
" + Locations + @";
map.setUIToDefault();
}
}
</script> ";
}
私はJavaScriptとGoogleマップに非常に慣れていません。誰かが私を正しい方向に導くことができれば、本当に感謝しています!
答え
これが解決策です：
コードビハインド:
public class Marker
{
public string title;
public string lat;
public string lng;
public string description;
}
private void BuildScript(DataTable tbl)
{
string custLocationLat, custLocationLong;
List<Marker> valueList = new List<Marker>();
if (lblCustLatitude.Text == "")
custLocationLat = Convert.ToString(-26.172116);
else
custLocationLat = Convert.ToString(lblCustLatitude.Text);
if (lblCustLongtitude.Text == "")
custLocationLong = Convert.ToString(28.130557);
else
custLocationLong = Convert.ToString(lblCustLongtitude.Text);
Marker center = new Marker { title = "Smart Office", lat = custLocationLat, lng = custLocationLong, description = "0" };
List<Marker> marker = new List<Marker>();
foreach (DataRow r in tbl.Rows)
{
if (r["Latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["Latitude"].ToString();
string Longitude = r["Longitude"].ToString();
string driver = r["DrivName"].ToString();
string distance = r["Distance"].ToString();
marker.Add(new Marker { title = driver, lat = Latitude, lng = Longitude, description = distance });
}
JavaScriptSerializer ser = new JavaScriptSerializer();
hdnMarkers.Value = ser.Serialize(marker);
}
APS.Net
<script type="text/javascript">
var markers = document.getElementById("<%=hdnMarkers.Value%>").value;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' });
var lat_lng = new Array();
for (i = 0; i < markers.length; i++)
{
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng);
var marker = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: "2590BA", text: data.title }),
position: myLatlng, map: map, title: data.title
});
(function (marker, data)
{
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description); infoWindow.open(map, marker);
});
})(marker, data);
}
} </script>