Question

我只是想在谷歌地图API中添加标记

我正在尝试创建自定义标记并使用半径圆。我用过谷歌地图地理编码服务。基本上我想在选定的城市中显示推文，在某些半径和个人资料图片中作为标记和信息框。

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>  
  </head>
  <body>
    <div id="floating-panel">
      <input id="address" type="textbox" placeholder="Bangkok">
      <input id="submit" type="button" value="Search">
    </div>
    <div id="map"></div>
    <script>

      function initMap() {
        var place= {lat: 13.7565, lng: 100.5018}; 
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: place
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    // Create marker 
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(13.7563, 100.5018),
      title: 'Some location'
    });


    var circle = new google.maps.Circle({
      map: map,
      radius: 16093,    // 10 miles in metres
      fillColor: '#AA0000'
    });
    circle.bindTo('center', marker, 'position');

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPgJahvyB7ZJb8bm-X0Z5KuCp5vtSSx6A&callback=initMap">
    </script>
  </body>
</html>

Answer 1

地理编码器是异步的，您需要在回调函数中使用返回的数据。将标记/圆圈定义移动到地理编码器的回调函数中：

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var place = {
    lat: 13.7565,
    lng: 100.5018
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: place
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
  geocodeAddress(geocoder, map);
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
      var circle = new google.maps.Circle({
        map: marker.getMap(),
        radius: 16093, // 10 miles in metres
        fillColor: '#AA0000'
      });
      circle.bindTo('center', marker, 'position');
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <input id="address" type="textbox" placeholder="Bangkok" value="Bankok">
  <input id="submit" type="button" value="Search">
</div>
<div id="map"></div>

＆＃13;

Answer 2

//objmap is the map object
// custom_data is the array of geo_location
// toolTip is the marker title

function setMarkers(objmap,custom_data,toolTip) {

    var image = {
        url: '../img/icon.png'
    };

    if(custom_data!=null) {
        for (var i = 0; i < custom_data.length; i++) {

            var beach = custom_data[i];
            var myLatLng = new google.maps.LatLng(parseFloat(beach.lt), parseFloat(beach.lg));
            var marker = new google.maps.Marker({
                id: beach.vid,
                position: myLatLng,
                map: objmap,
                icon: image,
                title: toolTip,
                zIndex: 1
            });

            google.maps.event.addListener(marker, 'click', viewMarker(marker.id));

        }
    }

}

在谷歌地图上添加标记

2 个答案: