Question

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

这是我正在显示数据的div标签。

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

这是在html页面上调用locate函数的按钮

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

以下是我试图在谷歌地图上显示标记的功能。

     $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中得到了一个空的灰色框。问题在哪里

Answer 1

可能是您没有为地图div指定维度（这在谷歌地图中是必需的）

试试这种方式

 <div id="map" style="height: 400px; width: 400px;"></div>

Google地图不会在地图上显示地图和标记

1 个答案: