在javascript中使用剃刀

Question

有人可以解釋我的可能選項，當試圖獲得JavaScript內剃刀數據？我正在嘗試向Google地圖添加標記。

這似乎工作：

@model IEnumerable<ServicesPortal.Models.MapsPartialModel> 
@{ 
    ViewBag.Title = "Home Page"; 
} 

@if (Model != null) 
{ 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(46.119944, 14.815333), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     addmarker(46.119944, 14.815333); 
     // and so on... 

     function addMarker(x, y) { 
      var location = new google.maps.LatLng(x, y); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } 
    } google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="map" style="width:auto; height:500px"></div> 
} 

雖然這並不：

@model IEnumerable<ServicesPortal.Models.MapsPartialModel> 
@{ 
    ViewBag.Title = "Home Page"; 
} 

@if (Model != null) 
{ 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(46.119944, 14.815333), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     @foreach (var item in Model) 
     { 
      <text> 
       addMarker(@item.Profile.lat, @item.Profile.lng); 
      </text> 
     } 

     function addMarker(x, y) { 
      var location = new google.maps.LatLng(x, y); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } 
    } google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="map" style="width:auto; height:500px"></div> 
} 

編輯：這也沒有工作...

@model IEnumerable<ServicesPortal.Models.MapsPartialModel> 
@{ 
    ViewBag.Title = "Home Page"; 
} 

@if (Model != null) 
{ 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(46.119944, 14.815333), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     @foreach (var item in Model) 
     { 
      <text> 
       addMarker(@Html.Raw(item.Profile.lat), @Html.Raw(item.Profile.lng)); 
      </text> 
     } 

     function addMarker(x, y) { 
      var location = new google.maps.LatLng(x, y); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } 
    } google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="map" style="width:auto; height:500px"></div> 
} 

編輯：也嘗試了一些變數...不效果。

@model IEnumerable<ServicesPortal.Models.MapsPartialModel> 
@{ 
    ViewBag.Title = "Home Page"; 
} 

@if (Model != null) 
{ 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(46.119944, 14.815333), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     // test 
     var lat = 46.119944; 
     var lng = 14,815333; 

     @foreach (var item in Model) 
     { 
      <text> 
       addMarker(@lat, @lng); 
      </text> 
     } 

     function addMarker(x, y) { 
      var location = new google.maps.LatLng(x, y); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } 
    } google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="map" style="width:auto; height:500px"></div> 
} 

我嘗試使用此解決方案，但我失去了一些東西...... Using Razor within JavaScript

Answer 1

你的價值觀包含點和剃刀，在亮度，解釋，作爲一個object.property。嘗試使用Html.Raw()：

<text>addMarker(@Html.Raw(item.Profile.lat), @Html.Raw(item.Profile.lng));</text> 

Answer 2

@model IEnumerable<Advertise.ViewModel.Models.Address.AddressViewModel> 

    <style> 
     #markerClusterMapCanvas { 
      height: 100%; 
      width: 100%; 
     } 

    </style> 

<div id="markerClusterMapCanvas"></div> 
@if (Model != null) 
{ 
    <script> 
     var map; 
     var locationMap = []; 

     function initMapMarkerCluster() { 

      map = new google.maps.Map(document.getElementById('markerClusterMapCanvas'), 
      { 
       zoom: 10, 
       center: { lat: 35.6988196, lng: 51.3924643 } 
      }); 

      var markers = locationMap.map(function(location, i) { 
       return new google.maps.Marker({ 
        position: location 
       }); 
      }); 

      var markerCluster = new MarkerClusterer(map, 
       markers, 
       { imagePath: '/Content/GoogleMap/m' }); 





     } 

@foreach (var item in Model) 
      { 
       <text> 
        addMarker(@item.Latitude, @item.Longitude); 
       </text> 
      } 
     function addMarker(x, y) { 
      locationMap.push({lat: x, lng: y}); 
     } 
    </script> 
    <script src="~/Scripts/GoogleMap/markerclusterer.js"></script> 

    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNquRLkvpmnKcTnyLvCIxt1oh-HRiQiMg&callback=initMapMarkerCluster"> 
    </script> 
} 

Answer 3

我用Html.Raw獲得標記，然後把標記緯度，經度和內部的一些信息‘位置’。我創建了一個基於給定位置數組的標記數組。

var markers = locations.map(function (location, i) { 
      var marker = new google.maps.Marker({ 
       position: {lat: location.lat, lng: location.lng}, 
       id:location.id, 
       title: location.placeName, 
       clickable: true 
      }); 
      marker.addListener('click', function() { 
       //when clicked, do sth 
      }); 
      return marker; 
     });