【问题标题】:Markers not showing in Google Maps - Bootstrap谷歌地图中未显示的标记 - Bootstrap
【发布时间】:2015-03-21 03:52:44
【问题描述】:

我正在与标记作斗争...我试图在我的本地 XAMPP 服务器中单击时显示一个标记。在我得到的 HTML 中:

<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?&sensor=TRUE">
</script>

<div id="map" class="centered row clearfix partida doesntPlay"></div>

然后在JS中:

var marker;
var markers = [];

var initialize = function() {

var mapOptions = {
    center: new google.maps.LatLng(43.177644, -2.310920),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
});
}
// Add a marker to the map and push to the array.
function addMarker(location) {
 marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
console.log("new Marker: " + marker.getPosition().k + "/" +marker.getPosition().D);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
 markers = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

我不得不说地图是隐藏的,当用户点击一个按钮时它就会出现。我已经用显示地图进行了尝试,并得到了相同的结果。我可以在控制台上看到带有纬度和经度的日志,但地图没有显示任何标记。

有人可以帮帮我吗?

编辑:

我注意到,如果我注释 Bootstrap CSS 行,标记会完美显示。所以问题是地图中有,但由于CSS而没有显示。无论如何,我还看不到标记。

重新编辑:

已解决(或多或少)。如果我使用自定义图标,没问题。所以我将默认图标用作 customo 图标,然后就完成了。

【问题讨论】:

  • Your code works。您的代码和我的示例之间的唯一区别是我向地图元素添加了宽度和高度属性。
  • 它在我的页面上不起作用。我正在使用引导程序,我注意到如果我禁用引导程序 CSS,它就可以工作。现在我正在尝试禁用影响标记的样式。

标签: javascript twitter-bootstrap google-maps google-maps-api-3 google-maps-markers


【解决方案1】:

已解决(或多或少)。如果我使用自定义图标,没问题。所以我使用默认图标作为自定义图标,然后完成。

【讨论】:

    猜你喜欢
    • 2014-05-17
    • 2020-06-08
    • 2013-07-05
    • 1970-01-01
    • 2013-05-18
    • 2011-10-18
    • 2020-06-08
    • 1970-01-01
    相关资源
    最近更新 更多