相关疑难解决方法(0)

Twitter Bootstrap CSS影响谷歌地图

我正在使用Twitter Bootstrap,并拥有Google地图.

地图上的图像(例如标记)在Bootstrap中被CSS扭曲.

在Bootstrap CSS中有:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

当我max-width使用Firebug 禁用该属性时,标记图像显示为正常.如何防止Bootstrap CSS影响Google地图图像？

css google-maps twitter-bootstrap

rak*_*los

2013 06-05

147
推荐指数

4
解决办法

5万
查看次数

在调整网页大小之前,嵌入谷歌地图显示错误

我正在尝试在我的网页中显示地图以从中获取坐标.它工作正常,我可以拖放标记并在输入框中获取坐标.

但是当我加载网页时,问题出现了.一切都很好地展示了地图,在这里你可以看到地图的显示方式:

错误的地图

但是,如果在这一刻我调整网页的大小,我的意思是,如果它是全屏,请把它放一半.如果它只是屏幕的一部分,或者使它变得更大或更小.然后,您将看到正确的地图:

(我知道它不是同一个地方.我从2次重装中拍摄了图像)

我用HTML创建网页,但我称之为不同的网页.加载索引时,会出现一个带有此按钮的按钮

href:<a href="#openMap">

Run Code Online (Sandbox Code Playgroud)

并且,显示的部分将是:

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

Run Code Online (Sandbox Code Playgroud)

所有的div,形式......都是正确关闭的.我有很多输入框和字段,我没有把它们放在这里.

然后,在我的谷歌地图脚本中我有这个:

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

  var myOptions = {
     zoom: 14,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

Run Code Online (Sandbox Code Playgroud)

但我不知道为什么我需要调整大小.这是一种解决方法吗？

编辑:我添加更多信息:

我用这种方式调用具有地图的网页部分:

$(document).on("pageinit", '#openMap', function() {

Run Code Online (Sandbox Code Playgroud)

我试着把

google.maps.event.trigger(map, 'resize'); …

Run Code Online (Sandbox Code Playgroud)

html javascript google-maps

Bir*_*ibu

2017 05-23

46
推荐指数

2
解决办法

2万
查看次数

谷歌地图v3没有完全显示在html5中

谷歌地图v3没有完全显示在html5,phonegap中. 在此输入图像描述

这个地图是可拖动的,这里是JavaScript代码(main.js)

 var map;
 function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);

 var myOptions = {
 center: myLatlng,
 zoom:5,
 mapTypeId: google.maps.MapTypeId.ROADMAP

 };
 map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

 setMarker(myLatlng);
 setMarker(myLatlng2);

 }

 function setMarker(p)
 {
 marker = new google.maps.Marker({
 position: p,
 title:"Hello World 2!"
 });
 marker.setMap(map);

 }

 initialize();

Run Code Online (Sandbox Code Playgroud)

这是我的HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet"  href="css/jquery.mobile.css" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>

 <script …

Run Code Online (Sandbox Code Playgroud)

html5 android google-maps-api-3 cordova

Aye*_*sha

lucky-day

7
推荐指数

1
解决办法

1693
查看次数