MVC和javascript中的Google地图标记数组错误 [英] Google map marker array error in MVC and javascript

问题描述

查看

View

@{
    ViewBag.Title = "Home Page";
}



    <div class="divdisplay">
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
        <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
        </script>

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



        <script type="text/javascript">

            window.onload = function () {
                var mapOptions = {
                    center: new google.maps.LatLng(25.359454, 68.357989),
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };


                var markers;
                $(document).ready(function () {
                    $("#txt_button").on('click', function () {

                        $.get("/Home/dates", { dt: '04-26-2018', city: 'sadgemoor' }, function (data) {
                            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                            $.each(data, function (i, v1) {
                                markers = [{ "title": 'No Title', "lat": v1.b_latlng1, "lng": v1.b_latlng2, "description": 'No Description' }]
                            });
                        });

                    });


                });


                // declare an array to keep all google.maps.Marker instances in:
                var googleMarkers = [];


                var infoWindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(document.getElementById("dvMap"), 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
                    });



                    // add the new marker to the googleMarkers array
                    googleMarkers.push(marker);



                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }


                // now all the markers have been created, make a new MarkerClusterer:
                var mcOptions = { gridSize: 50, maxZoom: 15, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' };
                var markerCluster = new MarkerClusterer(map, googleMarkers, mcOptions);

            }
        </script>
        <button id="txt_button">Marker</button>
        <div id="dvMap" style="width: 900px; height: 500px">
        </div>


    </div>

Crud Class < br $>

Crud Class

public class Crud_class
    {
        public string b_latlng1 { get; set; }
        public string b_latlng2 { get; set; }
    }

数据库等级

DB Class

using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;

    namespace sql_cluster.Models
    {
        public class db
        {
          public List<Crud_class> GetAllRoutes(DateTime dt,string city)
            {
                string strConnection = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
                List<Crud_class> lstRoutes = new List<Crud_class>();
                using (SqlConnection con = new SqlConnection(strConnection))
                {
                    string sql = "select b_latlng from map_table where t_date='" + dt + "' and city='" + city + "'";
                    SqlCommand cmd = new SqlCommand(sql, con);
                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();
                    Crud_class route = null;
                    while (reader.Read())
                    {
                        route = new Crud_class();
                        //route.id = Convert.ToInt32(reader["id"]);
                        route.b_latlng1 = (reader["b_latlng"].ToString().Split(',')[0]);
                        route.b_latlng2 = (reader["b_latlng"].ToString().Split(',')[1]);
                        //route.LatLngTo = reader["b_latlng"].ToString();
                        lstRoutes.Add(route);
                    }
                }
                return lstRoutes;
            }
        }
    }

家庭控制器

Home Controller

using sql_cluster.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace sql_cluster.Controllers
{
    public class HomeController : Controller
    {



        public ActionResult Index()
        {
            return View();
        }

        public JsonResult dates(DateTime dt,string city)
        {
            List<Crud_class> lst = new db().GetAllRoutes(dt,city);
            return Json(lst, JsonRequestBehavior.AllowGet);

        }

    }
}

什么我试过了：

What I have tried:

Please solve my problem. I am tired to pass SQL Server database value in Google Map marker Array in JavaScript Mvc. I am Run the code generate error "marker.length". In this code i will be showing Google Map Marker Cluster. I hope any one can help me. Thanks in Advance..

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（#txt_button）。on（'click'，function（）{

("#txt_button").on('click', function () {

.get（/ Home / dates，{dt：'04 -26-2018'，city ：'sadgemoor'}，函数（数据）{
map = new google.maps.Map（document.getElementById（dvMap），mapOptions）;

.get("/Home/dates", { dt: '04-26-2018', city: 'sadgemoor' }, function (data) { map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

这篇关于MVC和javascript中的Google地图标记数组错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！