Question

我已经阅读了许多关于人们谷歌地图的帖子，这些帖子产生了一个空白页面，但在尝试了多种解决方案后，我感到很茫然。

以下是我的代码：

 <!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Go Catch Em All Bakewell!</title>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKeyIsHere"
        type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function customIcon(type) {
    return "http://moneyontheside.co.uk/icons/" + type + ".png";
}

function load() {
    alert("load");
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(53.213613, -1.673780),
    zoom: 12,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("createXML.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var pokeid = markers[i].getAttribute("PokeID");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + PokeID;
      var icon = customIcon(type);
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>

</script>

</head>

任何帮助都会受到赞赏，因为我正在努力调试，所以很可能不得不重新开始。

为了使问题更适用于更广泛的受众，也许您可以建议我从哪里开始调试？正如你所看到的那样，我试着通过输入＆＃34; alert（）＆＃34;来看看发生了什么。但从来没有得到任何弹出窗口。

提前感谢您的帮助。

Answer 1

为什么需要PHP文件？您正在执行GET请求，但这是否真的有必要？我建议你试试Google Polymer。有了它，你可以做到：

public class MainActivity extends AppCompatActivity {
TextView textView;
Firebase rootRef =  new Firebase("https://fir-3-e5ce7.firebaseio.com/condition");

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);



    Firebase.setAndroidContext(this);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);



    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

    textView = (TextView)findViewById(R.id.firebasedata);

    rootRef.child("message").addValueEventListener(new ValueEventListener() {

        @Override
        public void onDataChange(DataSnapshot snapshot) {
           String superr = (String) snapshot.getValue();
            textView.setText(superr);

        }

        @Override public void onCancelled(FirebaseError error) { }
    });
}

Here是该元素的文档。我知道这不是您正在寻找的方法，但更容易配置和自定义。基本上，Polymer是Web Components的语法糖，Web Components是一组新技术，允许创建自定义元素，封装样式并将HTML文件导入其他HTML文件。我认为Polymer的方法通常是现代的，更简单的。用Polymer设置创建一个Plnkr并在这里分享，你会发现你会喜欢它。

谷歌地图不会加载 - 从教程中修改空白屏幕

1 个答案: