谷歌地图不显示地图,也不显示标记

时间:2016-11-03 12:16:29

标签: javascript asp.net-mvc google-maps razor google-maps-api-3

我正在尝试将标记放在我的Db中存储的谷歌地图的纬度和经度上。

但我没有在我的页面上查看地图而没有标记。

无法弄清楚这里有什么问题。

我有console.log个标记&结果是一个对象,我不确定它是否应该如此。

@if (item.Longitude != null)
    {
        <span class="js-latmaps">   @item.Latitude</span>
        <span class="js-longmaps">   @item.Longitude</span>
    }
    <div id="dvMap" style="width: 500px; height: 500px">
</div>

@section scripts {
    <script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script> 

<script type = "text/javascript">

        var markers = [
            {
                "lat": $('.js-latmaps'),
                "lng": $('.js-longmaps')
            }
        ];
        console.log(markers);
        window.onload = function() {
            var mapOptions = {
                center: new window.google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new window.google.maps.InfoWindow();
            var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i];
                var myLatlng = new window.google.maps.LatLng(data.lat, data.lng);
                var marker = new window.google.maps.Marker({
                    position: myLatlng,
                    map: map

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

https://jsfiddle.net/9z6t2m3q/

1 个答案:

答案 0 :(得分:1)

只需替换

<script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script> 

通过

<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places></script>

请注意:

  • 删除API_KEY周围的<>
  • 在您的API_KEY和&
  • 之间添加libraries=places
  • libraries = places替换为libraries=places(无空格)