【问题标题】:Google MyMaps to Google Maps API谷歌我的地图到谷歌地图 API
【发布时间】:2017-04-28 02:16:38
【问题描述】:

我正在尝试使用 Google Maps API

重新创建以下使用 Google MyMaps 制作的地图

有人知道最好的方法吗?目前有以下代码,但看起来不太好

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Search for up to 200 places with Radar Search</title>
  <style>
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script>
    var map;
    var infoWindow;
    var service;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 54.607868,
          lng: -5.926437
        },
        zoom: 10,
        styles: [{
          stylers: [{
            visibility: 'simplified'
          }]
        }, {
          elementType: 'labels',
          stylers: [{
            visibility: 'off'
          }]
        }]
      });

      infoWindow = new google.maps.InfoWindow();
      service = new google.maps.places.PlacesService(map);

      // The idle event is a debounced event, so we can query & listen without
      // throwing too many requests at the server.
      map.addListener('idle', performSearch);
    }



    function performSearch() {
      var request = {
        bounds: map.getBounds(),
        keyword: 'best view'
      };
      service.radarSearch(request, callback);
    }

    function callback(results, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      for (var i = 0, result; result = results[i]; i++) {
        addMarker(result);
      }
    }

    function addMarker(place) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: {
          url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
          anchor: new google.maps.Point(10, 10),
          scaledSize: new google.maps.Size(10, 17)
        }
      });

      google.maps.event.addListener(marker, 'click', function() {
        service.getDetails(place, function(result, status) {
          if (status !== google.maps.places.PlacesServiceStatus.OK) {
            console.error(status);
            return;
          }
          infoWindow.setContent(result.name);
          infoWindow.open(map, marker);
        });
      });
    }
  </script>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIcOfMnc85XkuJmotWkLL4mthAHqlUuWA&callback=initMap&libraries=places,visualization" async defer></script>
</body>

</html>

【问题讨论】:

标签: javascript jquery html google-maps google-api


【解决方案1】:

使用保存的谷歌我的地图并从你的谷歌驱动器分享它

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-10-17
    • 1970-01-01
    • 1970-01-01
    • 2013-08-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多