Я получил сообщение об ошибке при установке кода JavaScript для API карт Google на странице MVC - PullRequest
Новая
       26

Я получил сообщение об ошибке при установке кода JavaScript для API карт Google на странице MVC

0 голосов
/ 05 декабря 2018

Я работаю над приложением MVC, работающим с картами Google API, и я пишу свои коды на обычной HTML-странице, и она работает нормально, но когда я перемещаю эти коды в файл MVC Razor, возникает ошибка строки

это мой код 

<head>
    <script src="https://maps.googleapis.com/maps/api/js?Ket=API_KEY&callback=initMap">
    </script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>
        .labels {
            color: red;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            width: 60px;
            border: 2px solid black;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="controls-polyline" style="align-content:center">
    </div>
    <div id="gmap-polyline">
        <div align="center" id="map" style="width: 1000px; height: 700px;">
            <script type="text/javascript">
                var locations = [
                  ['Place 1', 33.75586, 35.6628018, 10, '', ''],
                  ['Place 2', 36.7074804, 37.6878624, 8, '~/maps/images/p2.png', ''],
                  ['Place 3', 38.5708937, 34.6664307, 7, '~/maps/images/p3.png', 'https://www.google.com.sa/maps/place/Al+Sadhan+Stores/@38.6931256,34.7640829,14.75z/data=!4m8!1m2!2m1!1z2KfZhNiz2K_Yrdin2YYgIDE0!3m4!1s0x0:0x154b423825155cce!8m2!3d24.6934641!4d46.7713577'],
               ];

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 11,
                    center: new google.maps.LatLng(33.75586, 35.6628018),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var infowindow = new google.maps.InfoWindow();
                var marker, marker2, i;

                var icon = {
                    url: "~/maps/images/MY_Pen.png", //url
                    scaledSize: new google.maps.Size(22, 50), //scaled size
                    origin: new google.maps.Point(0, 0), //origin
                    anchor: new google.maps.Point(0, 0) //anchor
                };

                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        title: locations[i][0],
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        draggable: true,
                        animation: google.maps.Animation.DROP,
                        icon: '~/maps/images/MY_Pen.png',
                        label: {
                            text: locations[i][0],
                            color: 'red',
                            fontSize: '15px',
                            fontWeight: 'bold',
                            align: 'right'
                        }
                    });

                    function toggelBounce() {
                        if (marker.getAnimation() !== null) {
                            marker.setAnimation(null);
                        } else {
                            marker.setAnimation(google.maps.Animation.BOUNCE);
                        }
                    }

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent('<table width="200" border="0"><tr><td> <IMG BORDER="0" ALIGN="Left" SRC="' + locations[i][4] + '"></td><td><table width="200" border="0"><tr><td>' + locations[i][0] + '</td></tr><tr><td>&nbsp;</td></tr><tr><td><a href="' + locations[i][5] + '" target="_blank">Go To Location</a></td></tr></table></td></tr></table> ');
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                }
            </script>
        </div>
    </div>
</body>

При вставке этих кодов в файл Razor я получил странную ошибку

Ошибка синтаксического анализатора

Описание: Произошла ошибкаво время синтаксического анализа ресурса, необходимого для обслуживания этого запроса.Пожалуйста, просмотрите следующую конкретную информацию об ошибке разбора и измените исходный файл соответствующим образом.

Сообщение об ошибке анализатора: «38.5708937» недопустимо в начале блока кода.Допустимы только идентификаторы, ключевые слова, комментарии, "(" и "{".

Просьбы могут помочь мне в этом вопросе.

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Попробуйте закодировать координату в виде строки вместо чисел с плавающей точкой 

  ['Place 1', '33.75586', '35.6628018, 10', '', ''],
0 голосов
/ 05 декабря 2018

Добавьте лишнюю @ в строку 29, чтобы она читалась (double @@) 

['Place 3', 38.5708937, 34.6664307, 7, '~/maps/images/p3.png', 'https://www.google.com.sa/maps/place/Al+Sadhan+Stores/@@38.6931256,34.7640829,14.75z/data=!4m8!1m2!2m1!1z2KfZhNiz2K_Yrdin2YYgIDE0!3m4!1s0x0:0x154b423825155cce!8m2!3d24.6934641!4d46.7713577'],
...