如何在Google Maps API上的标记周围添加圆圈 [英] How to add circles around markers on Google Maps API

问题描述

这是我用来在Google地图的多个位置上显示标记的代码. 我要添加一个标记，并在标记周围添加一个5公里的圆圈.

This is a code that I use to display markers on several places in google maps. I want to make an addition to this and add a 5km circle around the markers.

我尝试添加没有运气的这段代码:

I tried with adding this block of code without luck:

var circle = new google.maps.Circle({
center:position, 
radius: radius, 
fillColor: "#0000FF", 
fillOpacity: 0.1, 
map: map, 
strokeColor: "#FFFFFF", 
strokeOpacity: 0.1, 
strokeWeight: 2 
});

这是下面的完整代码，这是一个jsfiddle供参考

this is the full code below, and here is a jsfiddle for reference

var center = "Vilnius, Lithuania";
var locations = [
  ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"],
  ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"],
  ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"],
  ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"],
  ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"]
];


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

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"));
  // center and zoom map on "center" address
  geocoder.geocode({
    address: center
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.bounds);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  for (var i = 0; i < locations.length; i++) {
    codeAddress(locations[i], i);
  }

}

function codeAddress(location, i) {
  geocoder.geocode({
    'address': location[0]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        title: "marker " + i,
        position: results[0].geometry.location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location[0] + "<br>" + location[1]);
        infoWin.open(map, this);
      })


//i added this block
var circle = new google.maps.Circle({
center:position, 
radius: radius, 
fillColor: "#0000FF", 
fillOpacity: 0.1, 
map: map, 
strokeColor: "#FFFFFF", 
strokeOpacity: 0.1, 
strokeWeight: 2 
});
//end of block addition

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);

更新

这是我从控制台获得的

radius is not defined

推荐答案

您只需定义radius和position变量，例如:

You have just to define radius and position variable, e.g :

var radius = 1000;
var position = marker.getPosition();

要进行缩放，可以使用map.setZoom();，例如在setCenter之后添加它:

And for tha zoom you can use map.setZoom();, add it after setCenter for example :

map.setCenter(results[0].geometry.location);
map.setZoom(5);

工作中的小提琴 .

Working fiddle.

代码段:

var center = "Vilnius, Lithuania";
var locations = [
  ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"],
  ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"],
  ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"],
  ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"],
  ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"]
];


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

function codeAddress(location, i) {
  geocoder.geocode({
    'address': location[0]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      map.setZoom(5);

      var marker = new google.maps.Marker({
        map: map,
        title: "marker " + i,
        position: results[0].geometry.location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location[0] + "<br>" + location[1]);
        infoWin.open(map, this);
      })

      var radius = 1000;
      var position = marker.getPosition();

      var circle = new google.maps.Circle({
        center: position,
        radius: radius,
        fillColor: "#0000FF",
        fillOpacity: 0.1,
        map: map,
        strokeColor: "#FFFFFF",
        strokeOpacity: 0.1,
        strokeWeight: 2
      });

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", function() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"));
  // center and zoom map on "center" address
  geocoder.geocode({
    address: center
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        map.setZoom(map.getZoom() + 3);
      });
      map.fitBounds(results[0].geometry.bounds);

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

  for (var i = 0; i < locations.length; i++) {
    codeAddress(locations[i], i);
  }
});

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于如何在Google Maps API上的标记周围添加圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！