Question

如何在Google地图周围放置边框？我用过：

mapcanvas.style.style='border:10px solid #0b0';

这是对的吗？我是谷歌地图的新手。

我想我发现它没有显示的原因，但任何人都可以查看并让我知道正确的格式。

<section id="wrapper">
Click the allow button on the top of the page to let the browser find your location.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '250px';
  mapcanvas.style.width = 'auto';
  mapcanvas.style.style='border:10px solid #0b0';
  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });
}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>

Answer 1

这与Google地图无关;那是一只红鲱鱼。

您的问题只是如何在DIV或其他DOM元素上放置边框。如果你在没有谷歌地图的情况下尝试使用你的代码，它仍然不会在你的DIV上放置边框。

而不是：

mapcanvas.style.style = 'border:10px solid #0b0';

你可以使用：

mapcanvas.style.border = '10px solid #0b0';

或者，使用jQuery，您可以简化这部分代码：

var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '250px';
mapcanvas.style.width = 'auto';
mapcanvas.style.style='border:10px solid #0b0';
document.querySelector('article').appendChild(mapcanvas);

为：

$('<div id="mapcontainer">').css({
    height: 250,
    width: 'auto',
    border: '10px solid #0b0'
}).appendTo('article');

Answer 2

派对已经来不及了，但毫无疑问，在我看来，实际这样做的正确方法是简单地用一些基本的CSS对包装进行风格化。

#wrapper{
  border:10px solid #0b0;
  min-height:250px;
  height:100%;
  width: 100%;
}

将#wrapper放在特定的高度和范围内width元素使地图适合特定尺寸。

如何在谷歌地图周围放置边框

2 个答案: