我如何左对齐谷歌地图 [英] How I can left align the google maps

问题描述

如何左对齐Google地图，我的意思是标记位置。这里是我的JS

function showGoogleMaps（）{

var latLng = new google.maps.LatLng（position [0]，position [1]）;

var mapOptions = {
zoom：16，
zoomControl：false，
mapTypeControl：false，
streetViewControl：false，//隐藏黄色街道查看pegman
scaleControl：true，//允许用户缩放Google Map
mapTypeId：ROADMAP，
center：latLng，
滚轮：false，
样式：样式

};

map = new google.maps.Map（document.getElementById（'googlemaps'），
mapOptions）;

//在位置显示默认红色标记
marker = new google.maps.Marker（{
position：latLng，
map：map，
draggable：false，
title：'Hello'，
animation：google.maps.Animation.DROP
}）;
}


以下是截图

默认标记位置

我希望这是

标记或位置默认为居中。默认情况下，我想要左边或右边。

谢谢

解决方案

简单的方法： b
$ b

最初将地图的宽度设置为例如30％。

现在地图的中心位于这些地图的中间30％。

地图加载后，将地图宽度设置为100％。
$ b

  function initialize（）{var goo = google.maps，map = new goo.Map（document.getElementById（'googleMap'），{}），markers = [{pos：new goo.LatLng（26.1445169，91.7362 ）}，{pos：new goo.LatLng（26.2571285，92.05991）}，{pos：new goo.LatLng（26.3143518，91.0497609）}，]，bounds = new google.maps.LatLngBounds（）;对于（var i = 0; i< markers.length; ++ i）{new google.maps.Marker（{map：map，position：markers [i] .pos}）; bounds.extend（标记[I] .POS）; } map.fitBounds（bounds）; goo.event.addListenerOnce（map，'idle'，function（）{this.getDiv（）。style.width ='100％'; goo.event.trigger（this，'resize'）;}）;} google。 maps.event.addDomListener（window，'load'，initialize）;  

html，body，＃map_wrapper，＃googleMap {height：100％;保证金：0;填充：0; width：100％;}＃googleMap {width：30％;}

< div id =map_wrapper> < div id =googleMap>< / div>< / div>< script src =https://maps.googleapis.com/maps/api/js?v=3>< / script>>

panBy -method：

function initialize（）{var goo = google.maps， map = new goo.Map（document.getElementById（'googleMap'），{}），markers = [{pos：new goo.LatLng（26.1445169，91.7362）}，{pos：new goo.LatLng（26.2571285，92.05991）} ，{pos：new goo.LatLng（26.3143518，91.0497609）}，]，bounds = new google.maps.LatLngBounds（）;对于（var i = 0; i< markers.length; ++ i）{new google.maps.Marker（{map：map，position：markers [i] .pos}）; bounds.extend（标记[I] .POS）; } map.fitBounds（bounds）; go.event.addListenerOnce（map，'idle'，function（）{this.getDiv（）。style.width ='100％'; this.panBy（ - （this.getDiv（）。offsetWidth / 1.5），0） ; goo.event.trigger（this，'resize'）;}）;} google.maps.event.addDomListener（window，'load'，initialize）;

< pre class =snippet-code-css lang-css prettyprint-override> html，body，＃map_wrapper，＃googleMap {height：100％;保证金：0;填充：0; width：100％;}＃googleMap {width：30％;}

< div id =map_wrapper> < div id =googleMap>< / div>< / div>< script src =https://maps.googleapis.com/maps/api/js?v=3>< / script>

How to left align the google maps, I mean the marker positions. Here is my JS

function showGoogleMaps() {

    var latLng = new google.maps.LatLng(position[0], position[1]);

    var mapOptions = {
        zoom: 16, 
        zoomControl:false,
        mapTypeControl:false,
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId:ROADMAP,
        center: latLng,
        scrollwheel: false,
        styles: styles

    };

    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);

    // Show the default red marker at the location
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        title: 'Hello',
        animation: google.maps.Animation.DROP
    });
}

Here are the screenshots

The default marker location

How I want this to be

The marker or location is centered by default. I want that either to the left or right by default.

Thanks

解决方案

A simple approach:

Initially set the width of the map to e.g 30%.

The center of the map now will be in the middle of these 30%.

Once the map is loaded set the width of the map to 100%.

function initialize() {

  var goo = google.maps,
    map = new goo.Map(document.getElementById('googleMap'), {}),
    markers = [{
      pos: new goo.LatLng(26.1445169, 91.7362)
    }, {
      pos: new goo.LatLng(26.2571285, 92.05991)
    }, {
      pos: new goo.LatLng(26.3143518, 91.0497609)
    }, ],
    bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; ++i) {
    new google.maps.Marker({
      map: map,
      position: markers[i].pos
    });
    bounds.extend(markers[i].pos);
  }
  map.fitBounds(bounds);

  goo.event.addListenerOnce(map, 'idle', function() {

    this.getDiv().style.width = '100%';
    goo.event.trigger(this, 'resize');
  });
}

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

html,
body,
#map_wrapper,
#googleMap {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#googleMap {
  width: 30%;
}

<div id="map_wrapper">
  <div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

To align the markers on the right additionally use the panBy-method:

function initialize() {

  var goo = google.maps,
    map = new goo.Map(document.getElementById('googleMap'), {}),
    markers = [{
      pos: new goo.LatLng(26.1445169, 91.7362)
    }, {
      pos: new goo.LatLng(26.2571285, 92.05991)
    }, {
      pos: new goo.LatLng(26.3143518, 91.0497609)
    }, ],
    bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; ++i) {
    new google.maps.Marker({
      map: map,
      position: markers[i].pos
    });
    bounds.extend(markers[i].pos);
  }
  map.fitBounds(bounds);

  goo.event.addListenerOnce(map, 'idle', function() {

    this.getDiv().style.width = '100%';
    this.panBy(-(this.getDiv().offsetWidth/1.5),0);
    goo.event.trigger(this, 'resize');
  });
}

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

html,
body,
#map_wrapper,
#googleMap {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#googleMap {
  width: 30%;
}

<div id="map_wrapper">
  <div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

这篇关于我如何左对齐谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！