javascript - 如何在谷歌地图中的当前位置而不是标记上制作圆圈

Question

如何在谷歌地图中的当前位置而不是指针上制作圆圈。我正在处理谷歌地图当前位置。这是我的代码。一切正常。我只想指出谷歌地图上的当前位置使用圆圈而不是指针箭头。这是我的代码。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaczGkYJhz_uP1Xo03sWxYnBB7R1NXzZE&sensor=false&libraries=places&language=eng&types=establishment"></script>

navigator.geolocation.getCurrentPosition(function (p) {

  var LatLng = new google.maps.LatLng(p.coords.latitude,p.coords.longitude);

  var mapOptions = {
      center: LatLng,
      zoom: 13,
      mapTypeId:  google.maps.MapTypeId.ROADMAP                      

  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var marker = new google.maps.Marker({

      position: LatLng,
      map: map,
      title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
  });
  google.maps.event.addListener(marker, "click", function (e) {
      var infoWindow = new google.maps.InfoWindow();
      infoWindow.setContent(marker.title);
      infoWindow.open(map, marker);
  });
});

我必须在代码中修改什么才能做到这一点。有人可以帮助我吗？？？有人可以修改我的代码吗？？？

我已经尝试修改我的代码，但它不起作用

var circle = new google.maps.Marker({
                                            center: center,
                                            center: new google.maps.LatLng(p.coords.latitude, p.coords.longitude),
                                            strokeColor: '#FF0000',
                                            strokeOpacity: 0.8,
                                            strokeWeight: 2,
                                            fillColor: '#FF0000',
                                            fillOpacity: 0.35,
                                            map: map,
                                            position: LatLng,

                                          title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
                                        });

但它不起作用

Answer 1

您必须使用圆圈而不是标记。 Google Maps JS API 有很好的文档和示例。 Link to sample

在“圆形”选项对象中进行必要的更改，以使圆形看起来像您想要的那样。

navigator.geolocation.getCurrentPosition(function (p) {

  var LatLng = new google.maps.LatLng(p.coords.latitude,p.coords.longitude);

  var mapOptions = {
      center: LatLng,
      zoom: 13,
      mapTypeId:  google.maps.MapTypeId.ROADMAP                      

  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // Commented out the marker
  /*var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
  });*/

  //Added the circle
  var cityCircle = new google.maps.Circle({
              strokeColor: '#FF0000',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#FF0000',
              fillOpacity: 0.35,
              map: map,
              center: LatLng,
              radius: 100
            });

  // Removed Event listner on the marker as marker is not being used
  /*google.maps.event.addListener(marker, "click", function (e) {
      var infoWindow = new google.maps.InfoWindow();
      infoWindow.setContent(marker.title);
      infoWindow.open(map, marker);
  });*/
});

希望这有帮助!!