在谷歌地图javascript中设置缩放级别

Setting zoom level in google maps javascript

本文关键字：缩放 设置 谷歌地图 javascript      更新时间：2023-09-26

我已经花了很长时间试图获得一个带有单个标记的谷歌地图。我已经完成了javascript，但无法获得11的缩放级别。我开发了一个可以使用多个标记的地图，代码为"MYMAP.bounds.extend（point）；"以扩展地图。对于这个地图，我只有一个标记，当它加载时，我希望它位于地图的中心。感谢您的任何帮助。

打开代码。。。。。

            // extend the bounds to include the new point
            // I have another map with multiple markers
            // and the code below extends the map bounds
            // for this map, I only have one marker
            // and I want it centered on the lat & long
            // zoom level 11. I thought I set that level
            // on line 11 but it doesn't seem to work as intended
            MYMAP.bounds.extend(point);


            var marker = new google.maps.Marker({
                position: point,
                map: MYMAP.map
            });
            var infoWindow = new google.maps.InfoWindow();
            var html='<strong>'+name+'</strong.><br />'+address;
            google.maps.event.addListener(marker, 'mouseover', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });
            google.maps.event.addListener(marker,'mouseout', function() {
        infoWindow.close();
    });

            MYMAP.map.fitBounds(MYMAP.bounds);
        });
    });
}
  1. 记下标记的数量（我建议将它们排列成一个阵列）
  2. 如果是1个标记，则将地图的中心设置为该标记，并将缩放设置为11
  3. 如果>1个标记，请使用map.fitBounds

概念验证小提琴

代码片段：

$(document).ready(function() {
  $("#map").css({
    // height: 700,
    // width: 800
  });
  var myLatLng = new google.maps.LatLng(46.0772870, -118.2938430);
  MYMAP.init('#map', myLatLng, 11);
  $("#showmarkers").ready(function(e) {
    MYMAP.placeMarkers('location_markers.xml');
  });
});
var MYMAP = {
  map: null,
  bounds: null,
  markers: []
}
MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom: zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
  //$.get(filename, function(xml){
  var xml = xmlParse(xmlString);
  $(xml).find("marker").each(function() {
    var name = $(this).find('name').text();
    var address = $(this).find('address').text();
    // create a new LatLng point for the marker
    var lat = $(this).find('lat').text();
    var lng = $(this).find('lng').text();
    var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
    // extend the bounds to include the new point
    // I have another map with multiple markers
    // and the code below extends the map bounds
    // for this map, I only have one marker
    // and I want it centered on the lat & long
    // zoom level 11. I thought I set that level
    // on line 11 but it doesn't seem to work as intended
    MYMAP.bounds.extend(point);
    var marker = new google.maps.Marker({
      position: point,
      map: MYMAP.map
    });
    var infoWindow = new google.maps.InfoWindow();
    var html = '<strong>' + name + '</strong.><br />' + address;
    google.maps.event.addListener(marker, 'mouseover', function() {
      infoWindow.setContent(html);
      infoWindow.open(MYMAP.map, marker);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
      infoWindow.close();
    });
    MYMAP.markers.push(marker);
    if (MYMAP.markers.length == 1) {
      MYMAP.map.setCenter(marker.getPosition());
    } else {
      MYMAP.map.fitBounds(MYMAP.bounds);
    }
  });
  //});
}
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }
  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
  return createElement('div', null);
}
var xmlString = '<markers><marker><lat>42</lat><lng>-72</lng><name>somewhere</name><address>between Southbridge and Woodstock</address></marker><!-- marker><lat>35</lat><lng>-117</lng><name>somewhere else</name><address>Southern California</address></marker --></markers>';
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
<input type="button" id="showmarkers" />

相关文章：