c# - SearchBox 谷歌地图不工作 C# MVC 3

Question

我尝试使用 MVC 3 和 C# 来使用 Google Maps SearchBox，但出现错误。我使用的示例是这样的:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox 问题出在这一行:

var input = /** @type {HTMLInputElement} */(document.getElementById('target'));

错误:

Server Error in '/' Application.

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS0103: The name 'type' does not exist in the current context

Source Error:


Line 55:                 
Line 56:         /*var input = jQuery.type(document.getElementById('endereco'));*/
Line 57:         var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
Line 58:         var searchBox = new google.maps.places.SearchBox(input);
Line 59:         var markers = [];

Source File: n:\Desenvolvimento\Projetos\TCC\TCC\Views\Posicionador\Index.cshtml    Line: 57 

我尝试交易:

var input = jQuery.type(document.getElementById('endereco'));

错误:

Uncaught TypeError: Cannot read property 'SearchBox' of undefined 

完整代码为:

<script type="text/javascript">
    var map;
    var marker1;
    var marker2;
    var rulerpoly; 
    var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
    var latlngFURBTV = new google.maps.LatLng(-26.905,-49.05694);
    var markers = [];



    $(document).ready(function () {
        $("#abrirmapa").click(function() { initialize(); });
        $("#centralizarFURBTV").click(function() { centralizarFURBTV(); });
        $("#limpar").click(function () { limpar(); });
        $("#grafico").click(function () { grafico(); });
        $("#salvar").click(function () { salvar(); });
        $("#posicaoautomatica").click(function () { posicaoautomatica(); });
        $("#cmdLocal").click(function () { cmdLocal(); });
        $("#cmdTorre").click(function () { cmdTorre(); });     

        $(".knob").knob({
            'min': 30,
            'max':150,
            'angleOffset':0,
            'angleArc': 180,
            'readOnly':true

        });         
    });

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(-26.88135, -49.06039),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP /*google.maps.MapTypeId.TERRAIN*/
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        google.maps.event.addListener(map, 'click', function (event) {
            clique_mapa(event.latLng);
        });

        marker1 = undefined;
        marker2 = undefined;
        rulerpoly = undefined; 

        //GEOCODER
        geocoder = new google.maps.Geocoder();

        marker = new google.maps.Marker({
            map: map,
            draggable: true
        });

        var input = jQuery.type(document.getElementById('endereco'));        
        var searchBox = new google.maps.places.SearchBox(input);
        var markers = [];

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();

          for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
          }

          markers = [];
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0, place; place = places[i]; i++) {
            var image = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            var marker = new google.maps.Marker({
              map: map,
              icon: image,
              title: place.name,
              position: place.geometry.location
            });

            markers.push(marker);

            bounds.extend(place.geometry.location);
          }

          map.fitBounds(bounds);
        });

        google.maps.event.addListener(map, 'bounds_changed', function() {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
        });
    }
</script>

@{
    ViewBag.Title = "Posicionador";
}


<div class="linha">
    <div class="coluna" style="width:160px">
        Dados Antena FURB TV
    </div>
    <div class="coluna" style="width:152px">Lat: 26° 54' 18'' S</div>
    <div class="coluna" style="width:152px">Lng: 49° 03' 25'' O</div>        
</div>

<div class="linha">
    <div class="coluna" style="width:160px">&nbsp;</div>
    <div class="coluna" style="width:152px">Lat: -26,905</div>
    <div class="coluna" style="width:152px">Lng: -49,05694</div>        
</div>

<div class="clear"><br /></div>


<div class="coluna2">
    <div id="map_canvas" style="width:100%; height:400px; "></div>
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>    
</div>

Answer 1

问题出在 Razor 中的 @ 字符。有必要用@@来转义