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

您必须使用SELECT ID, sum(CASE WHEN Result='Value1' then countOfResult else NULL END) Value1, sum(CASE WHEN Result='Value2' then countOfResult else NULL END) Value2 FROM myTable_count GROUP BY ID;而不是Circles。 Google Maps JS API具有良好的文档和样本。 Link to sample

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

Marker

希望这会有所帮助!!

Answer 2

如果您只想要一个“圆形标记”而不是默认的“气泡”，则可以使用predefined SVG SymbolPath CIRCLE：

var marker = new google.maps.Marker({
  position: LatLng,
  map: map,
  title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + LatLng.lat() + "<br />Longitude: " + LatLng.lng(),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "blue",
    fillOpacity: 1.0,
    strokeColor: "blue",
    strokeOpacity: 1.0,
    strokeWeight: 0,
    scale: 10
  },
});

proof of concept fiddle

代码段

var geocoder;
var map;
var infoWindow;

function initialize() {
  var LatLng = new google.maps.LatLng(37.4419, -122.1419);
  var infoWindow = new google.maps.InfoWindow();
  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: " + LatLng.lat() + "<br />Longitude: " + LatLng.lng(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "blue",
      fillOpacity: 1,
      strokeColor: "blue",
      strokeOpacity: 1,
      strokeWeight: 0,
      scale: 10
    },
  });
  google.maps.event.addListener(marker, "click", function(e) {
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent(marker.title);
    infoWindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

如何在谷歌地图中的当前位置而不是标记上创建圆圈

2 个答案: