当我在 MVC 页面中为 google 映射 API 设置 JavaScript 代码时出现错误

Question

我正在开发使用 Google API 地图的 MVC 应用程序，我在正常的 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”在代码块的开头无效。只有标识符、关键字、注释、“(”和“{”有效。

任何人都可以帮助我解决这个问题。

Answer 1

在第 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'],

Answer 2

尝试将坐标编码为字符串而不是浮点数

  ['Place 1', '33.75586', '35.6628018, 10', '', ''],

当我在 MVC 页面中为 google 映射 API 设置 JavaScript 代码时出现错误

I got Error when I set JavaScript code for google maps API in MVC Page

javascript

c#

google-maps

google-maps-api-3

asp.net-mvc-4