0

如何在谷歌地图周围设置边框？我用过：

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>
4

2 回答 2

2

这与谷歌地图无关；这是一个红鲱鱼。

您的问题只是如何在 DIV 或其他 DOM 元素上放置边框。如果您在完全不涉及 Google 地图的情况下尝试您的代码，它仍然不会在您的 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');
于 2013-04-05T21:52:59.690 回答
0

super late to the party, but there is no doubt in my mind that the actual correct way to do this is by simply stylizing the wrapper with some basic css. 

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

Put #wrapper inside a specific height & width element to make the map fit specific dimensions.

于 2017-11-16T15:46:32.640 回答