谷歌地图没有在地图上显示地图和标记

Google Map not displaying map and marker on the map

本文关键字：地图 显示 谷歌地图      更新时间：2023-09-26

我正试图在谷歌地图上显示纬度和经度。用我的代码，我得到了空框与谷歌地图。

这是我显示数据的div标记。

 <div id="map"></div>

这是调用html页面上定位功能的按钮

<td><button type="button" class="btn btn-primary" ng-click="MyMap(record.id ,record.coordinates)">{{record.coordinates}} </button>

这是我试图在谷歌地图上显示标记的函数throught。

     $scope.MyMap=function(id,coordinates)
        {
                console.log(id,coordinates);
                locate(coordinates);

        }
    function locate(coordinates) {
        console.log(coordinates);
  var myLatlng = new google.maps.LatLng(coordinates[1], coordinates[0]);
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: myLatlng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  })
}

当我点击按钮时，我在地图分区中得到了一个空的灰色框。问题在哪里

可能是您没有为地图div分配维度（这在谷歌地图中是强制性的）

试试这种方式

 <div id="map" style="height: 400px; width: 400px;"></div>
相关文章：