谷歌地图js在中国显示地图而不是实际位置

Question

基本上，我只是想设置我的网页谷歌地图，以显示我已经获得坐标的位置，但它在我的网页上显示了中国的位置，无论我尝试它的坐标是什么在同一个地方。

if($('#map-canvas').length != 0){
		var map;
		function initialize() {
			var mapOptions = {
				zoom: 16,
				scrollwheel: false,
			 	center: new google.maps.LatLng(25.932884, 83.569633),
			 	styles: [
							{"stylers": [{ hue: "#000000" },
							{ saturation: -100 },
							{ lightness: -5 }]},
    					{
					      "featureType": "road",
					      "elementType": "labels",
					      "stylers": [{"visibility": "off"}]
					    },
					    {
					      "featureType": "road",
					      "elementType": "geometry",
					      "stylers": [{"lightness": 100},
					            {"visibility": "simplified"}]
					    }
			 	]
			};
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			var image = 'include/images/map-marker.png';
			var myLatLng = new google.maps.LatLng(39.091617, -77.204273);
			var beachMarker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image
			 });
		}

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

.map-container{height:400px; position:relative; margin:0; padding:0; }
#map-canvas{height:100%;}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
  	<div id="map-canvas"></div>
  </div>

我希望它能显示这些坐标：39.0916165，-77.2064619

相反，我看到了一张中国地图，例子可以在这里看到： http://delcontedesigns.com/yaeger/contact

任何建议或帮助将不胜感激。我以前做过地图，但从未遇到过这个问题。

Answer 1

可能是因为您将地图置于错误坐标的中心位置。请尝试以下方法：

center: new google.maps.LatLng(39.0916165, -77.2064619)

<强> DEMO

Answer 2

您的代码将地图置于center: new google.maps.LatLng(25.932884, 83.569633)的中心位置。将其更改为center: new google.maps.LatLng(39.0916165, -77.2064619)或致电map.setCenter(myLatLng);（一旦您已定义）。

代码段

if ($('#map-canvas').length != 0) {
  var map;

  function initialize() {
    var mapOptions = {
      zoom: 16,
      scrollwheel: false,
      center: new google.maps.LatLng(25.932884, 83.569633),
      styles: [{
          "stylers": [{
              hue: "#000000"
            },
            {
              saturation: -100
            },
            {
              lightness: -5
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "labels",
          "stylers": [{
            "visibility": "off"
          }]
        },
        {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": [{
              "lightness": 100
            },
            {
              "visibility": "simplified"
            }
          ]
        }
      ]
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var image = 'include/images/map-marker.png';
    var myLatLng = new google.maps.LatLng(39.091617, -77.204273);
    var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      // icon: image
    });
    map.setCenter(myLatLng);
  }

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

.map-container {
  height: 400px;
  position: relative;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
  <div id="map-canvas"></div>
</div>