Google地图只显示半屏？ [英] Google Map only show half screen?
本文介绍了Google地图只显示半屏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
google.maps.event.trigger（map，resize）; 但没有任何运气。 任何人都可以帮忙吗？
当它加载时，它只显示屏幕的一半，如您在这里看到的那样：
I
$（function（）{
var geocoder = new google.maps .Geocoder（）;
var locations = [{
location：Brogade Odense Danmark，
image：brodate.png，
text：这很好，
奖励：20
}，{
位置：Christiansgade，Odense，Danmark，
图片：kochsgrade.png，
文字： ，
奖励：100
}，{
位置：Overgade Odense Danmark，
图片：overgrade.png，
文字：smooooth :) ，
奖励：2000
}];
var cc =;
var markers = [];
var infowindow = new google.maps.InfoWindow（）;
var map;
var userPosition = new google.maps.LatLng（55.4000，10.3833）;
var defaultLocation =Brogade Odense Danmark;
//将所有标记重置为除了id = id
函数resetMarker（id）{
for（var i = 0; i< locations.length; （标记[i] .id！== id）{
//将标记重置为默认值
标记[i] .setIcon（locations.image）;
} else {
markers [i] .setIcon（locations.image）;
$ b函数get_user_position（）{
geocoder.geocode（{
address ：defaultLocation
}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var latLng = results [0] .geometry.location;
map.setCenter（latLng）;
（var i = 0; i< locations.length; i ++）{
addLocation（locations [i]，i）;
}
}
}）;
函数addLocation（location，i）{
geocoder.geocode（{
address：location。位置
}，函数（结果，状态）{
if（status == google.maps.GeocoderStatus.OK）{
//获取地址的位置
latLng = results [ 0] .geometry.location;
//创建新标记
var marker = new google.maps.Marker（{
position：latLng，
map：map，
id：i
}）;
//将标记添加到数组
markers [i] = marker;
//回调事件click
google.maps.event.addListener（marker，click，function（）{
resetMarker（i）;
infowindow.setContent（< table>< tr>< td>< lt ; img src = \'+ location.image +\ height = 50 width = 50>< / td>< td width = \'10 \'>< / td>< td>< small> + location.text +< / small> ;< strong> $+ location.reward +奖励< / strong>< br />< a href = \'＃\'class = \'btn btn-small btn -success''>查看列表< / a>< / td>< / tr>< / table>）;
infowindow.open（map，marker）;
marker.setIcon（location.image）;
}）;
}
}）;
}
函数init_map（）{
//初始地图选项
mapOptions = {
center：userPosition，
zoom：15 ，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
//初始化映射
map = new google.maps.Map（document.getElementById（map ），mapOptions）;
get_user_position（）;
$ b $（document）.ready（function（）{
init_map（）;
$（＃map ）.hide（）;
google.maps.event.trigger（map，resize）;
map.setZoom（map.getZoom（））;
$（＃map ）.show（）;
}）;
}）;
CSS防止引导失败：
< style> #map标签{width：auto;显示：内联; }
#map img {max-width：none; }< /风格>
这里是我的div与地图：
< div id =mapclass =righttarget =_ blankstyle =width：960px; height：350px> < / DIV>
解决方案
在后触发resize- strong>显示地图。
Google Map only shows half of the screen. I tried the fix with resize: google.maps.event.trigger(map, "resize"); but without any luck.
Can anyone help?
When it loads it only shows half the screen as you can see here:
I've searched and searched without any solution.
$(function () {
var geocoder = new google.maps.Geocoder();
var locations = [{
location: "Brogade Odense Danmark",
image: "brodate.png",
text: "This is nice",
reward: 20
}, {
location: "Christiansgade, Odense, Danmark",
image: "kochsgrade.png",
text: "Uber nice",
reward: 100
}, {
location: "Overgade Odense Danmark",
image: "overgrade.png",
text: "smooooth :)",
reward: 2000
}];
var cc = "";
var markers = [];
var infowindow = new google.maps.InfoWindow();
var map;
var userPosition = new google.maps.LatLng(55.4000, 10.3833);
var defaultLocation = "Brogade Odense Danmark";
//Reset all marker to defeault except the one whose id = id
function resetMarker(id) {
for (var i = 0; i < locations.length; i++) {
if (markers[i].id !== id) {
//reset marker to default
markers[i].setIcon(locations.image);
} else {
markers[i].setIcon(locations.image);
}
}
}
function get_user_position() {
geocoder.geocode({
address: defaultLocation
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
map.setCenter(latLng);
for (var i = 0; i < locations.length; i++) {
addLocation(locations[i], i);
}
}
});
}
function addLocation(location, i) {
geocoder.geocode({
address: location.location
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Get position of addres
latLng = results[0].geometry.location;
//create new marker
var marker = new google.maps.Marker({
position: latLng,
map: map,
id: i
});
//add marker to the array
markers[i] = marker;
//call back event click
google.maps.event.addListener(marker, "click", function () {
resetMarker(i);
infowindow.setContent("<table><tr><td><img src=\'" + location.image + "\' height=50 width=50></td><td width=\'10\'></td><td><small>" + location.text + "</small><br><strong>$" + location.reward + " reward</strong><br /><a href=\'#\' class=\'btn btn-small btn-success\'>View listing</a></td></tr></table>");
infowindow.open(map, marker);
marker.setIcon(location.image);
});
}
});
}
function init_map() {
//The initial map option
mapOptions = {
center: userPosition,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Init map
map = new google.maps.Map(document.getElementById("map"), mapOptions);
get_user_position();
}
$(document).ready(function () {
init_map();
$("#map").hide();
google.maps.event.trigger(map, "resize");
map.setZoom(map.getZoom());
$("#map").show();
});
});
CSS for prevent fail in bootstrap:
<style>#map label { width: auto; display:inline; }
#map img { max-width: none; }</style>
And here is my div with the map:
<div id="map" class="right" target="_blank" style="width:960px;height:350px"> </div>
解决方案
Trigger the resize-event after showing the map.
这篇关于Google地图只显示半屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
