javascript - 居中 map 并设置默认位置

Question

我想让谷歌地图标记居中，我还希望它在发生无点击事件时显示默认位置(在本例中为类加罗尔)。我在哪里可以改变它？

var locations = [
    [
    "BANGALORE",
     "215 West Girard Avenue 19123",
    "12.9716",
    "77.5946"
    ],
    [
    "JAIPUR",
    "5360 Old York Road 19141",
    "26.9124",
    "75.7873"
    ],
    [
    "MUMBAI",
    "1350 W Girard Avenue 19123",
    "19.0760",
    "72.8777"
    ],
    [
    "HYDERABAD",
    "1950 W Girard Avenue 19123",
    "17.3850",
    "78.4867"
    ],
     [
    "CHENNAI",
    "1950 W Girard Avenue 19123",
    "13.0827",
    "78.4867"
    ]
    ];

gmarkers = [];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(39.9995601, -75.1395161),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();


function createMarker(latlng, html) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
    return marker;
}

for (var i = 0; i < locations.length; i++) {
    gmarkers[locations[i][0]] =
    createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0] + "<br>" + locations[i][1]);
}

fiddle 链接:https://jsfiddle.net/gLcac3qa/

Answer 1

1. 要使“BANGALOR”成为默认值(我假设您想打开信息窗口)，请在创建标记后触发其上的 click 事件。

//Set default to Bangalore
google.maps.event.trigger(gmarkers['BANGALORE'],"click");

1. 如果您希望在单击 HTML 中的名称时使标记居中，请编写代码(在标记点击监听器中):

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    map.setCenter(this.getPosition())
});

proof of concept fiddle

代码片段:

var locations = [
  [
    "BANGALORE",
    "215 West Girard Avenue 19123",
    "12.9716",
    "77.5946"
  ],
  [
    "JAIPUR",
    "5360 Old York Road 19141",
    "26.9124",
    "75.7873"
  ],
  [
    "MUMBAI",
    "1350 W Girard Avenue 19123",
    "19.0760",
    "72.8777"
  ],
  [
    "HYDERABAD",
    "1950 W Girard Avenue 19123",
    "17.3850",
    "78.4867"
  ],
  [
    "CHENNAI",
    "1950 W Girard Avenue 19123",
    "13.0827",
    "78.4867"
  ]
];

gmarkers = [];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(12.9716, 77.5946),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();


function createMarker(latlng, html) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    map.setCenter(this.getPosition())
  });
  return marker;
}

for (var i = 0; i < locations.length; i++) {
  gmarkers[locations[i][0]] =
    createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0] + "<br>" + locations[i][1]);
}

//Set default to Bangalore
google.maps.event.trigger(gmarkers['BANGALORE'], "click");

#section23 {
  background: white;
  padding: 80px;
  text-align: center;
}
#div23 {
  padding-right: 20px;
  padding-left: 20px;
}
#section23 a {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: "ProximaNova-Bold";
  text-decoration: none;
  color: black;
  padding: 30px;
}
.clickableDiv {
  border: black 1px solid;
}
#map {
  width: 100%;
  height: 450px;
  position: relative;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<section id="section23">
  <div id="div23">
    <a id="loc1" class="clickableDiv" href="javascript:google.maps.event.trigger(gmarkers['BANGALORE'],'click');">BANGALORE</a>
    <a id="loc2" class="clickableDiv" href="javascript:google.maps.event.trigger(gmarkers['JAIPUR'],'click');">JAIPUR</a>
    <a id="loc3" class="clickableDiv" href="javascript:google.maps.event.trigger(gmarkers['MUMBAI'],'click');">MUMBAI</a>
    <a id="loc4" class="clickableDiv" href="javascript:google.maps.event.trigger(gmarkers['HYDERABAD'],'click');">HYDERABAD</a>
    <a id="loc5" class="clickableDiv" href="javascript:google.maps.event.trigger(gmarkers['CHENNAI'],'click');">CHENNAI</a>
  </div>
</section>

<section id="map"></section>