Question

我正在尝试创建一个简单的谷歌地图，但这个简单的设置似乎不起作用，任何人都可以告诉我我做错了什么？谢谢！

HTML

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat{
      return 55
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{
      return UITableViewAutomaticDimension
}

JS

<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">

</script>

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

文档就绪功能

    function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}

Answer 1

您应该为div添加宽度和高度。

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

Answer 2

在脚本调用api之后尝试添加＆amp; callback = initMap

Answer 3

$(document).ready(function(){
    initMap();
});

function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}

#map
{
width:500px;height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">

</script>

<div id="map" ></div>

Answer 4

代码工作正常。您需要指定div的高度和宽度。

使用内联css

style="width:400px;height:400px;"

或者使用CSS

#map {
  width: 400px;
  height: 400px;
}

测试：https://jsfiddle.net/LmckLLjj/

Answer 5

请为您的地图div设置高度和宽度

因为默认div高度和宽度为0

请像这样改变你的div

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

或者你可以像这样设置css：

<style>
#map{
height:100px;
width:100px;
}
</style>

Answer 6

您的callback参数未在＆lt; script＆gt;。
div没有宽度＆amp;高度。
如果您不使用回调参数，则＆lt; script＆gt;不需要推迟

＆＃13;

function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}

＆＃13;

<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&callback=initMap">

</script>
<div id="map" style="width:300px;height:300px;"> </div>

＆＃13;

简单的谷歌地图呼叫不工作的js

6 个答案: