Question

我对编码还很陌生，并且正在尝试创建自己的个人项目。我能够建立并运行一个简单的地图。

例如，我将如何创建您所在地区的所有啤酒厂。我需要访问一个API，然后为每个API创建一个标记吗？还是只在地图和Google“酿酒厂”内创建搜索栏？

 <div id="container">

        <div id="googleMap" style="width:100%;height:400px;"></div>
        <script src="https://maps.googleapis.com/maps/api/js? 
      key="KEYHERE"&callback=myMap"> 
       </script>

 </div>


function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({content: "Denver" });
  infowindow.open(map,marker);
}

如果您有带有示例的网站，或者可以帮助我学习的示例，我将不胜感激。我只是不知道它是如何工作的。谢谢

Answer 1

我将共享一个链接，该链接提供了使用此指南的指导，您可以创建API密钥并仅复制以下脚本，

       <!DOCTYPE html>
    <html>
      <head>
        <style>
          #map {
            height: 400px;  
            width: 100%;  
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    // Initialize and add the map
    function initMap() {

      var uluru = {lat: -104.991531, lng: 39.742043};

      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 4, center: uluru});
      // The marker, positioned at your location 
      var marker = new google.maps.Marker({position: uluru, map: map});
    }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js? 
 key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

点击以下链接，

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

在Google地图上标记位置

1 个答案: