Google地图来自Razor [英] Google Maps from Razor
本文介绍了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">×</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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
