我想点击谷歌地图marker.aps.net，从下拉列表中选择一个选项 [英] I wanted to give a select option from dropdown .when clicking on Google map marker.aps.net
问题描述
我有一个sqlserver数据库table.where有5列.Longitide，Latitude，Plantname，Line name，Machine Name。我想将这些数据填充到谷歌地图。所以纬度和经度都有一个marker.When点击标记下拉列表应该到来。所有plant_name都应该来。对于一个工厂名称，有一个以上的线就在那里。选择一个工厂后。应该有一个下拉列表应该有所有可用的线路名称。现在选择后必须显示LineName所有机器名。请帮助。我能够显示所有标记和相应的工厂名称。但是无法填充LineName。
我尝试过：
//这是HTML代码
<！DOCTYPE html>
< meta charset =utf-8>
< meta name =viewportcontent = width = device-width，initial-scale = 1，shrink-to-fit = no>
< meta http-equiv =x-ua-compatiblecontent =ie =边缘>
< title>智能起重机 - 仪表板
智能起重机
var markers = [
& lt ; asp：Repeater ID =rptMarkersrunat =server>
< ItemTemplate>
{
location：' & lt;％＃Eval（Location）％>'，
plant：'& lt;％＃Eval（PlantName）％>'，
lat：'& lt;％＃Eval（纬度）％>'，
lng：'& lt;％＃Eval（经度）％>'，
linename：'& lt;％＃Eval（LineName）％>'，
machinename：'& lt;％＃Eval（MachineName）％>'，
}
< / ItemTemplate>
< SeparatorTemplate>
，
< / SeparatorTemplate>
< / asp：Repeater>
];
window.onload = function（）{
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（plant-management-map），mapOptions）;
for（i = 0;我& lt; markers.length; i ++）
{
var data = markers [i]
var myLatlng = new google.maps.LatLng（data.lat，data。 lng）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
title：data.title
}）;
（函数（标记，数据）{
google.maps.event。 addListener（marker，click，function（e）{
infoWindow.setContent（< h1 class ='popup-heading'>+ data.plant +< / h1> < h6>+ data.location +< / h6>< div id ='popup-body-content'>< div class ='list-group'>< a class ='list -group-item list-group-item-action'>+ data.linename +< i class ='fa fa-caret-right'aria-hidden ='true'>< / i>< / a>< / div>< / div>）;
infoWindow.open（map，marker）;
}）;
}）（标记，数据）;
}
}
$ b
//这是C＃代码。
使用System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.UI;
使用System.Web.UI.WebControls;
使用System.Data;
使用System.Data.SqlClient;
使用System.Configuration;
public partial class plant_managment_me：System.Web.UI.Page
{
protected void Page_Load（object sender，EventArgs e）
{
if（！this.IsPostBack）
{
DataTable dt = this.GetData（select * from PlantMgt）;
rptMarkers.DataSource = dt;
rptMarkers.DataBind（）;
}
}
私有DataTable GetData（字符串查询）
{
string conString = ConfigurationManager.ConnectionStrings [CraneMonitorConnString]。ConnectionString;
SqlCommand cmd = new SqlCommand（query）;
using（SqlConnection con = new SqlConnection（conString））
{
using（ SqlDataAdapter sda = new SqlDataAdapter（））
{
cmd.Connection = con;
sda.SelectCommand = cmd;
使用（DataTable dt = new DataTable（））
{
sda.Fill（dt）;
return dt;
}
}
}
}
}
活动 | Maps JavaScript API | Google Developers [ ^ ]
I have a sqlserver database table.where there are 5 column.Longitide,Latitude,Plantname,Line name,Machine Name.I wanted to populate these data to google map.So that all Latitude and Longitude will have a marker.when clicking on marker a dropdown should come.where all plant_name should come.For one plant name there are more than one Line is there.So after selecting a plant.A dropdown should come which should have all the available Line Name.Now after selecting the LineName all Machine Name have to be displayed.Please Help.I am able to display all the markers and respective plant name.But not able to populate LineName.
What I have tried:
//this is HTML Code
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Intelligent Cranes - Dashboard
INTELLIGENT CRANES
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"location": '<%# Eval("Location") %>',
"plant": '<%# Eval("PlantName") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
"linename": '<%# Eval("LineName") %>',
"machinename": '<%# Eval("MachineName") %>',
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
window.onload = function () {
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("plant-management-map"), mapOptions);
for (i = 0; i < markers.length; i++)
{
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<h1 class='popup-heading'>" + data.plant + " </h1><h6 >" + data.location + " </h6><div id='popup-body-content'> <div class='list-group'><a class='list-group-item list-group-item-action'>" + data.linename + "<i class='fa fa-caret-right' aria-hidden='true'></i></a></div></div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
//Here is C# code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class plant_managment_me : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("select * from PlantMgt");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["CraneMonitorConnString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
}
Events | Maps JavaScript API | Google Developers[^]
这篇关于我想点击谷歌地图marker.aps.net，从下拉列表中选择一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
