在谷歌地图上绘制多个标记

本文关键字：绘制 谷歌地图 | 更新日期: 2023-09-27 17:58:17

我正在从MySQL数据库中检索纬度和经度，并使用谷歌地图使用标记显示检索到的坐标的位置，我正在尝试这样做：

无效页面加载：

int RowLength;
String[] lon = null;
String[] lat = null;
protected void Page_Load(object sender, EventArgs e)
        {
            using (MySql.Data.MySqlClient.MySqlConnection connection = new MySql.Data.MySqlClient.MySqlConnection("Server;Port;Database=DB;Uid=U;Pwd=P"))
            {
                connection.Open();
               MySql.Data.MySqlClient.MySqlCommand cmd = connection.CreateCommand();

               cmd.CommandText = "SELECT longitude,latitude FROM table";
               MySql.Data.MySqlClient.MySqlDataReader datr = cmd.ExecuteReader();
               lon = new string[datr.FieldCount];
               lat = new string[datr.FieldCount];

               rep_loc = new string[datr.FieldCount];
               RowLength = datr.FieldCount;
                while (datr.Read())
                {
                        lon[counter] = datr[0].ToString();
                        lat[counter] = datr[1].ToString();
                        counter++;
                }
                datr.Close();
                connection.Close();
            }
}

谷歌地图的Javascript

<script type="text/javascript">
    var lon;
    var lat;
    var homeLatlng;
    var mapOptions;
    var map;
    var contentString;
    var infowindow;
    function initialize() {
//I AM STUCK OVER HERE! and Don't know how to set multiple markers with information window for each marker
for(var i=0;i<='<%=RowLength%>';i++){
        homeLatlng = new google.maps.LatLng('<%=lat[0]%>', '<%=lon[0]%>');//initial
            mapOptions = {
                zoom: 5,
                center: homeLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            marker = new google.maps.Marker({
                position: homeLatlng,
                map: map,
                url: "http://www.google.com",
            });
            contentString = '<div id="content" style="color:#000000;">' +
            'This is a test <br>' +
            '<a href="www.google.com"> google </a> <br>' +
            '</div>';

            infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker) });
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);


</script>

有什么想法吗？

感谢

在谷歌地图上绘制多个标记

我使用javascript中的以下代码完成了这项工作：

<script type="text/javascript">
    var lat = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(lat)%>;
var lon = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(lon)%>;
function initialize() {
        mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(lat[0],lon[0]),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        infowindow = new google.maps.InfoWindow();

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var len = '<%=RowLength%>';
        for (i = 0; i <= len ; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat[i], lon[i]),
                map: map,
                url: "http://www.google.com",
            });
google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent("<div style='color:#000000';> Testing </div>");
                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }
google.maps.event.addDomListener(window, 'load', initialize);

</script>
相关文章：