Question

我想在地图中添加一个圆圈，在我从谷歌地图获得的当前标记的位置是可能的吗？我对html＆amp; javascript的了解非常有限。这是我的代码..

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Reverse Geocoding</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

    </style>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>


 var geocoder;
 var map;
 var marker;
 var infowindow = new google.maps.InfoWindow();


 function initializeMap() {

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             revereGeoCode(position.coords.latitude, position.coords.longitude);
         });
     } else {
         console.log("er")
         // make sure to handle the failure
     }

     var mapOptions = {
         zoom: 20,
         center: new google.maps.LatLng(38.078111, 23.734414),
         mapTypeId: 'roadmap'
     }
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 }

 function revereGeoCode(lat, lng) {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(lat, lng);
     geocoder.geocode({
         'LatLng': LatLng
     }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             if (results[1]) {
              // place your marker coding
                map.setZoom(20);

                // Define circle options
                var circleOptions = {
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: latlng,
                    radius: 20
                };

                // Add the circle to the map.
                var markerCircle = new google.maps.Circle(circleOptions);

                marker = new google.maps.Marker({
                    position: latlng,
                    map: map

                });



                 infowindow.setContent(results[0].formatted_address);
                 infowindow.open(map, marker);
             } else {
                 alert('No results found');
             }
         } else {
             alert('Geocoder failed due to: ' + status);
         }


     });
 }




 google.maps.event.addDomListener(window, 'load', initializeMap);
   </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

html＆amp; javascript是非常有限的。这是我的代码..

Answer 1

只需创建圆圈并使用与标记相同的坐标定义其中心。

// Define circle options
var circleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 20
};

// Add the circle to the map.
var markerCircle = new google.maps.Circle(circleOptions);

就是这样。

JSFiddle demo

Answer 2

    function initializeMap() {

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             revereGeoCode(position.coords.latitude, position.coords.longitude);
         });
     } else {
         console.log("er")
         // make sure to handle the failure
     }

     var mapOptions = {
         zoom: 18,
         center: new google.maps.LatLng(40.730885, -73.997383),
         mapTypeId: 'roadmap'
     }
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 }

 function revereGeoCode(lat, lng) {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(lat, lng);
     geocoder.geocode({
         'latLng': latlng
     }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             if (results[0]) {
                 // place your marker coding
                 map.setZoom(20);
                 marker = new google.maps.Marker({
                     position: latlng,
                     map: map
                     **/* You Should to add this*/**
                     icon: iconBase + 'circle.png'

  });
                 infowindow.setContent(results[0].formatted_address);
                 infowindow.open(map, marker);
             } else {
                 alert('No results found');
             }
         } else {
             alert('Geocoder failed due to: ' + status);
         }


     });
 }

在标记的中心添加圆圈

2 个答案: