本文介绍了谷歌地图内的引导模式不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在bootstrap模式中添加Google地图,但它不适合我。当我点击链接时,它会打开模式窗口,但地图无法正常显示,它没有模态地正常工作,但我不知道,现在发生了什么。
$ b
< script type =text / javascript> $(document).on(click,.open-AddBookDialog,function(){var myBookId = $(this).data('id'); $(。modal-body #bookId).val (myBookId);}); < /脚本> <! - MAP - > < script type =text / javascript> $(function(){var lat = 13.034118,lng = 77.5679959; latlng = new google.maps.LatLng(lat,lng),image ='http://www.google.com/intl/zh-CN/mapfiles/ms/ micons / blue-dot.png'; // zoomControl:true,// zoomControlOptions:google.maps.ZoomControlStyle.LARGE,var mapOptions = {center:new google.maps.LatLng(lat,lng),zoom:13,mapTypeId :google.maps.MapTypeId.ROADMAP,panControl:真,PanControlOptions,以:{位置:google.maps.ControlPosition.TOP_RIGHT},zoomControl可:真,ZoomControlOptions来:{风格:google.maps.ZoomControlStyle.LARGE,位置:google.maps。 ControlPosition.TOP_left}},map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions),marker = new google.maps.M arker({position:latlng,map:map,icon:image}); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input,{types:[geocode]}); autocomplete.bindTo('bounds',map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete,'place_changed',function(event){infowindow.close(); var place = autocomplete.getPlace(); if(place.geometry.viewport){map.fitBounds(place.geometry );其他{map.setCenter(place.geometry.location); map.setZoom(17);} moveMarker(place.name,place.geometry.location); $('。MapLat')。val(place .geometry.location.lat()); $('。MapLon').val(place.geometry.location.lng());}); google.maps.event.addListener(map,'click',function(event){$('。MapLat')。val(event.latLng.lat()); $('。MapLon')。val(event。 latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({latLng:event.latLng},function(results,status){console.log结果,状态); if(status == google.maps.GeocoderStatus.OK){console.log(results); var lat = results [0] .geometry.location.lat(),lng = results [0] .geometry .location.lng(),placeName = results [0] .address_components [0] .long_name,latlng = new google.maps.LatLng(lat,lng); moveMarker(placeName,latlng); $( #searchTextField)VAL(结果[0] .formatted_address); }}); });函数moveMarker(placeName,latlng){marker.setIcon(image); marker.setPosition(经纬度); infowindow.setContent(地名); //infowindow.open(map,marker); }});< / script>
< style类型= 文本/ CSS > @import url('http://getbootstrap.com/dist/css/bootstrap.css');< / style>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js> < / script>< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css><! - jQuery library - - >< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script><! - 最新编译的JavaScript - >< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script>< script src =http:/ /maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true\"></script><a数据肘节= 模态 数据-ID = ISBN564541 标题= 添加此产品的 类= 开addBookDialog BTN BTN-初级的 href = #addBookDialog 数据肘节= 模态 数据对象= #myModal >点击< / A>< ; br>地址:< input id = searchTextFieldtype =textsize =50style =>< br> < div class =modal fadeid =myModaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> < h4 class =modal-titleid =myModalLabel>模式标题< / h4> < / DIV> < div class =modal-body> <! - < img width =241height =72style =top:0px; width:241px; height:72px; src =img / logos / logo.pngdata-sticky-top =41data-sticky-height =36data-sticky-width =135alt =srisankaramatrimony-franchisee> - > < div id =map_canvasstyle =height:300px; width:100%; margin:0.6em;>< / div> < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>保存更改< /按钮> < / DIV> < / div><! - /.modal-content - > < / div><! - /.modal-dialog - >< / div><! - /.modal - >