Question

我正在尝试制作一个地图，在用户位置添加一个标记（附带一个搜索框），但即使我的Javascript看似合法，我也无法弄清楚看起来是什么问题。

背景资料：我正在学习的开始，用随附的CSS解释所有许多不必要的div。代码似乎没有问题，无论是CSS还是Javascript，但地图仍未显示在屏幕上。当有一个标准中心（设置有坐标）时，地图已经工作了，不幸的是代码消失了。

如果需要更多信息和/或以不同方式呈现，请告知我们。有一个工作片段用于测试。只需点击“运行代码段”。

function initialize(position) {
  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var setting = {
    center: location,
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), setting);

  var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: 'Marker'
  });


}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(initialize);
}

google.maps.event.addDomListener(window, 'load', initialize);

.mapContent {
  padding: 0;
  height: 500px;
  padding: 0;
  margin: 60px auto;
}
.mapContainer {
  width: 830px;
  padding: 0;
  margin: 0 auto;
}
div #googleMap {
  height: 500px;
  width: 500px;
  float: left;
  border-radius: 250px;
  margin-right: 30px;
}
div #searchbox {
  float: left;
  height: 400px;
  width: 300px;
  background: white;
  margin-top: 50px;
}
#floating-panel {
  z-index: 5;
  background-color: darkred;
  padding: 5px;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
  border-radius: 5px;
}

<div class="mapContent">
  <div class="mapContainer">
    <div id="searchbox">
      <div id="floating-panel">
        <input id="address" type="textbox" value="">
        <input id="submit" type="button" value="Sök">
      </div>
    </div>
    <div id="googleMap"></div>
  </div>
</div>

Answer 1

您的网页上出现以下错误：

“未捕获的ReferenceError：谷歌未定义”

请记住，在文档加载完成后无法加载API，您需要异步执行此操作。

此外，您可能忘记添加api网址引用：https://maps.googleapis.com/maps/api/js

看看这个小提琴，一切都很完美：

https://jsfiddle.net/eugensunic/wexd3spp/6/

启用导航的代码：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(initialize);
}

google.maps.event.addDomListener(window, 'load', initialize);

即使简单的代码

1 个答案: