Google地图来自Razor

问题描述

我怎样才能从另一个Razor获得谷歌地图？

大家好，
我试图解决问题...
Google Maps Javascript在Create.cshtml中，问题出现在Index.cshtml中。

$ b 索引按钮调用Create.cshtml一个Modal Boostrap。 p>

Index.cshtml如何从Create.cshtml中获取。

Modal正常工作，但Google地图不起作用。

Create.cshtml

  < div class =modal fadeid =myModalrole =dialog> 
<！ - 'has-error'class已添加到父窗体组中 - >> 
< div class =modal-dialog modal-lg> 
 
 < div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< h4 class =modal-title>创建< / h4> 
< / div> 
< div class =modal-body> 
 
 
< div class =form-group> 
 @ Html.LabelFor（m => m.GoogleMaps，new {@class =col-xs-3 control-label}）
< div class =col-xs-5 > 
 @ Html.TextBoxFor（m => m.GoogleMaps，new {@id =pac-input，@class =controls，placeholder =Search}）
 
< / div> 
< / div> 
 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

Javascript

 函数initAutocomplete（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat： - 33.8688，lng：151.2195}，
 zoom：13，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 //创建搜索框并将其链接到UI元素。 
 var input = document.getElementById（'pac-input'）; 
 var searchBox = new google.maps.places.SearchBox（input）; 
 map.controls [google.maps.ControlPosition.TOP_LEFT] .push（input）; 
 
 //将SearchBox结果偏向当前地图的视口。 
 map.addListener（'bounds_changed'，function（）{
 searchBox.setBounds（map.getBounds（））; 
}）; 
 
 var markers = []; 
 // [START region_getplaces] 
 //监听用户选择预测时触发的事件，并获取该地点的
 //更多详细信息。 
 searchBox.addListener（'places_changed'，function（）{
 var places = searchBox.getPlaces（）; 
 
 if（places.length == 0）{
返回; 
} 
 
 //清除旧的标记
 markers.forEach（function（marker）{
 marker.setMap（null）; 
 $ b））; 
 markers = []; 
 
 //对于每个地方，获取图标，名称和位置
 var bounds = new google.maps.LatLngBounds（ ）; 
 places.forEach（function（place）{
 var icon = {
 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）
}; 
 
 //为每个地方创建一个标记
 markers.push（new google.maps.Marker（{
 map：
 icon：icon，
 title：place.name，
 position：place.geometry.location 
}））; 
 
 if（place.geometry.viewport）{
 //只有地理编码具有视口。 
 bounds.union（place.geometry.viewport）; 
} else {
 bounds.extend（place.geometry.location）; 
} 
}）; 
 map.fitBounds（bounds）; 
}）; 
 // [END region_getplaces] 
} 
 
< script src =https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxx&libraries = places& callback = initAutocomplete
 async defer>< / script> 
  

Index.cshtml

 < div class =pull-right col-lg-1> 
< a class =btn btn-successonclick =OpenCreatePopup（）> 
< span class =glyphicon glyphicon-plus>< / span> 
< / a> 
< / div> 
 
< div id =DivToAppendPartialView>< / div> 
 
 
< script> 
函数OpenCreatePopup（）{
 $ .ajaxSetup（{cache：false}）; 
 $（'＃DivToAppendPartialView'）。load（/ Account / Create，function（）{
 $（'＃myModal'）。modal（{
 keyboard：true 
}，'show'）; 
}）; 
返回false; 
}; 
 
< / script> 
  

问题未显示Google地图中的模态Bootstrap。

$ b $ 帮助我！

解决方案

pre> .pac-container {
z-index：100000;
}


谷歌地图模式补救工作！

How can I get Google Maps from another Razor ?

Hello everyone,I'm trying to solve the problem ...Google Maps Javascript in Create.cshtml, the problem is in Index.cshtml.

Index button calls Create.cshtml a Modal Boostrap.

How do Index.cshtml getting from a Create.cshtml.

Modal works correct, but Google Maps does not work.

Create.cshtml

<div class="modal fade" id="myModal" role="dialog">
        <!-- 'has-error' class has been added on parent form-group div -->
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Create</h4>
                </div>
                <div class="modal-body">


                    <div class="form-group">
                        @Html.LabelFor(m => m.GoogleMaps, new { @class = "col-xs-3 control-label" })
                        <div class="col-xs-5">
                            @Html.TextBoxFor(m => m.GoogleMaps, new { @id = "pac-input", @class = "controls", placeholder = "Search" })
                            <div id="map" style="width:500px;height:380px;"></div>
                        </div>
                    </div>                  


                </div>
            </div>
        </div>
    </div>

Javascript

function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }

        // Clear out the old markers.
        markers.forEach(function (marker) {
            marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
            var icon = {
                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)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
            }));

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
    // [END region_getplaces]
}

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxx&libraries=places&callback=initAutocomplete"
    async defer></script>

Index.cshtml

        <div class="pull-right col-lg-1">
            <a class="btn btn-success" onclick="OpenCreatePopup()">
                <span class="glyphicon glyphicon-plus"></span>
            </a>
        </div>

<div id="DivToAppendPartialView"></div>


<script>
    function OpenCreatePopup() {
    $.ajaxSetup({ cache: false });
        $('#DivToAppendPartialView').load("/Account/Create", function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
        });
        return false;
};

</script>

Problem is not showing Google Maps in modal Bootstrap.

Help me !

解决方案

I found a solution !

 .pac-container {
  z-index: 100000;
}

Google Maps in modal boostrap work !

这篇关于Google地图来自Razor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！