Question

我整合了谷歌地图api代码。地图显示正常，但地图标记未显示。

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var centerPosition = {lat: 51.508742, lng: -0.120850};
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
          position: centerPosition,
          map: mapProp,
          title: 'Hello World!'
        });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&callback=myMap"></script>

Answer 1

您正在将地图设置为错误的地图

map: mapProp, - ＆gt; map: map,

实现了你的功能：

var centerPosition = {
    lat: 51.508742,
    lng: -0.120850
  };
  var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  var marker = new google.maps.Marker({
    position: centerPosition,
    map: map,
    title: 'Hello World!'
  });

使用JSFiddle：https://jsfiddle.net/6fey85dd/8/

Answer 2

这只是因为您设置为标记的属性应该是map而不是mapProp：

var marker = new google.maps.Marker（{ 位置：centerPosition，地图：地图，标题：'Hello World！' }）; }

地图标记未使用Google Map API显示

2 个答案: