Question

我正在写作，因为我制作了一个脚本，它将json数据创建多个动态标记，并且它可以工作！现在我正在尝试将InfoWindow添加到每个标记，但不起作用。我的代码是：

 $.ajax({
    type:'GET',
    url:"locali_json.php"+urlz,
    success:function(data){ 
          var json = JSON.parse(data);
          for (var i=0; i<json.length; i++) {
            point = new google.maps.LatLng(json[i].latitudine,json[i].longitudine);
            contentString = json[i].id_locale;
            addMarkers(point,contentString);
          }
    }
})}


 function addMarkers(point,contentString) {  
 marker = new google.maps.Marker({
    position: point,
    map: map
 });
 infowindow = new google.maps.InfoWindow({
                 content: contentString
             });
 markers.push(marker); // markers is an array
 infos.push(infowindow);  //info is an array
 for(var j=0; j<markers.lenght; j++){
  google.maps.event.addListener(marker, 'click', function() {
                infos[j].open(map,markers[j]);})

  }}

有人有什么建议吗？或者看哪里有错误？

Answer 1

你不能在javascript控制台中收到javascript错误吗？

for(var j=0; j<markers.lenght; j++){
 google.maps.event.addListener(marker, 'click', function() {
               infos[j].open(map,markers[j]);})
 }
}

应该是：

for(var j=0; j<markers.length; j++){
 google.maps.event.addListener(markers[j], 'click', function() {
             infos[j].open(map,markers[j]);})
 }
}

Answer 2

我是这样做的，您可以尝试。包括自定义的信息窗口。

Index.cshtml

@{
    Layout = null;
}

<html>
<head> 
    <style>
        #map-canvas {
            margin: 0;
            padding: 0;
            height: 400px;
            max-width: none;
        }
        .gm-style-iw {

            width: 350px !important;
            /*top: 0px !important;
            left: 0px !important;
            background-color: #fff;
            box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
            border: 1px solid rgba(72, 181, 233, 0.6);
            border-radius: 10px 10px 10px 10px;*/
        }

        #iw-container {
            margin-bottom: 10px;
        }

            #iw-container .iw-title {
                font-family: 'Open Sans Condensed', sans-serif;
                font-size: 22px;
                font-weight: 400;
                padding: 20px;
                background-color: #39ac73;
                color: white;
                margin: 2px;
                border-radius: 2px 2px 0 0;
            }

            #iw-container .iw-content {
                font-size: 13px;
                line-height: 18px;
                font-weight: 400;
                margin-right: 1px;
                padding: 15px 5px 20px 15px;
                max-height: 200px;
                overflow-y: auto;
                overflow-x: hidden;
            }

        #map-canvas img {
            max-width: none !important;
        }
        .iw-subTitle {
            font-size: 16px;
            font-weight: 700;
            padding: 5px 0;
        } 
        .infoDiv {
            height: 200px;
            width: 300px;
            -webkit-user-select: none;
            background-color: white;
        }
        .iw-bottom-gradient {
            position: absolute;
            width: 326px;
            height: 25px;
            bottom: 10px;
            right: 18px;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        }
    </style>
</head>
<body> 
        <div id="map-canvas" style="width: 1800px; height: 1500px">
        </div>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>
        <script type="text/javascript">
             var markers = @Html.Raw(ViewBag.Markers);
             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("map-canvas"), 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,
                         description: data.description,
                         icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
                         animation: google.maps.Animation.DROP,

                     }); 
                     // Add the circle for this city to the map.
                     var cityCircle = new google.maps.Circle({
                         strokeColor: '#FFFFFF',
                         strokeOpacity: 0.8,
                         strokeWeight: 2,
                         fillColor: '#FFFFFF',
                         fillOpacity: 0.35,
                         map: map,
                         center: myLatlng,
                         radius: 19999.45454,
                         position: myLatlng,
                         draggable: false
                     });
                     (function (marker, data) {
                         google.maps.event.addListener(marker, "click", function (e) {
                              infoWindow.setContent('<div id="iw-container">' +
                                 '<div class="iw-title">' + data.title + "</div>" + '<div class="iw-content">' 
                                 + "<p>" + data.description + "</p>"+'<img src="http://maps.marnoto.com/en/5wayscustomizeinfowindow/images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">'
                                 +'<div class="iw-bottom-gradient"></div>');
                             //infoWindow.setContent(data.title);
                             //infoWindow.setContent(data.description);
                             infoWindow.open(map, marker);

                         });

                     })(marker, data);
                 }
             }
        </script> 
</body>
</html>

控制器：

namespace Map.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            {
                string markers = "[";
                string conString = ConfigurationManager.ConnectionStrings["PTS"].ConnectionString;
                SqlCommand cmd = new SqlCommand("SELECT * FROM ProjeIlani");
                using (SqlConnection con = new SqlConnection(conString))
                {
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            markers += "{";
                            markers += string.Format("'title': '{0}',", sdr["Adres"]);
                            markers += string.Format("'lat': '{0}',", sdr["Enlem"]);
                            markers += string.Format("'lng': '{0}',", sdr["Boylam"]);
                            markers += string.Format("'description': '{0}'", sdr["Aciklama"]); 
                            markers += "},";
                        }
                    }
                    con.Close();
                }

                markers += "];";
                ViewBag.Markers = markers;
                return View();
            }
        }
    }
}

具有动态标记的动态信息窗

2 个答案: