Question

我一直在努力想要获得一张带有单个标记的Google地图。我已经完成了javascript，但无法在11处获得缩放级别。我开发了一个使用代码＆＃39; MYMAP.bounds.extend（point）;＆＃39;扩展地图。有了这张地图，我只有一个标记，我希望它在加载时在地图中居中。任何和所有的帮助表示赞赏。

打开代码.....

            // 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);
        });
    });
}

Answer 1

保留一些标记（我建议将它们保存在一个数组中）
如果是1个标记，请将地图的中心设置为该标记，并将缩放设置为11
if＆gt; 1个标记，使用map.fitBounds

proof of concept fiddle

代码段

$(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" />

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

1 个答案: