Google Maps API v3隐藏并显示绑定到标记的圆圈

时间:2012-12-08 01:57:53

标签: javascript google-maps google-maps-api-3 google-maps-markers

我已成功使用google map api v3将圆圈绑定到我的标记。我知道这一点,因为如果我将标记拖动,圆圈也会移动。

如果单击标记,如何引用圆圈。如果不可见,我需要显示圆圈,反之亦然。

以下是创建标记和圆圈的代码

var markerOptions = {
title: title,
icon: markerImage,
shadow: markerShadow,
position: latlng,
map: map
}
var marker = new google.maps.Marker(markerOptions);   
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
//circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');

我在stackoverflow上找到了一个答案,这让我觉得我需要做一个rem'd out map binding以及center绑定,但那不起作用。

这是标记的点击事件。

google.maps.event.addListener(marker, "click", function() {
var infowindowOptions = {
content: html
 }
var infowindow = new google.maps.InfoWindow(infowindowOptions);
cm_setInfowindow(infowindow);
infowindow.open(map, marker);
marker.setIcon(markerImageOut);
marker.circle({visible: true});

任何想法。我需要与刚刚点击或鼠标悬停的标记的边界圆相互作用。

2 个答案:

答案 0 :(得分:5)

一个选项是使圆圈成为标记的属性(如._myCircle),在点击处理程序中将其作为marker._myCircle引用。

将圆圈添加为marker:

的_myCircle属性
var circle = new google.maps.Circle({
  map: map,
  radius: 50*1609.34,// 50 MI
  visible: false
});
circle.bindTo('center', marker, 'position');
marker._myCircle = circle;

要切换它,请使用类似(未经测试)的内容:

if(marker._myCircle.getMap() != null) marker._myCircle.setMap(null);
else marker._myCircle.setMap(map);

答案 1 :(得分:1)

var rad =".$this->conf['radius'] * 1000 ."; //convert km to meter
var populationOptions = {
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 1,
   fillColor: '#FF0000',
   fillOpacity: 0.35,
   map: map,//map object
   center: new google.maps.LatLng($corr_match[0], $corr_match[1]),//center of circle
   radius: rad
};
var cityCircle = new google.maps.Circle(populationOptions);