将信息框添加到通过Google地图绘制的圈子的右侧边缘 [英] Add a infobox to the right edge of a circle drawn via Google Maps
本文介绍了将信息框添加到通过Google地图绘制的圈子的右侧边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这就是我所拥有的far：
http://jsfiddle.net/a1aq9ey8/6/
如果您放大/缩小地图，您会注意到信息框（8 MILE）的位置不再与圆形对齐...我想当用户放大或缩小时，信息框左对齐左侧/居中的边缘...这可能吗？
//设置您的Google地图参数
var map;
var bblocation = new google.maps.LatLng（37.787321，-122.258365 ）;
var map_zoom = 11;
//设置谷歌地图选项
var map_options = {
center：bblocation，
zoom：map_zoom，
panControl：false，
zoomControl：true，
mapTypeControl：false，
streetViewControl：false，$ b $ mapTypeId：googl e.maps.MapTypeId.ROADMAP，
滚动：false，
disableDefaultUI：true，
}
//初始化地图
map = new google .maps.Map（document.getElementById（'google-container'），map_options）;
var radiusOptions = {
strokeColor：＃222c38，
strokeOpacity：1，
strokeWeight：1，
fillColor：＃ffffff，
fillOpacity：0，
map：map，
center：bblocation，
radius：12872
};
markerCircles = new google.maps.Circle（radiusOptions）;
var labelText =8 MILE;
var myOptions = {
content：labelText，
boxStyle：{
background：'＃222c38'，
color：'#ffffff'，
textAlign ：center，
fontSize：8pt，
width：50px
}，
disableAutoPan：true，
pixelOffset：new google.maps.Size （-45，0），
position：new google.maps.LatLng（37.787321，-122.374365），
closeBoxURL：，
isHidden：false，
pane： mapPane，
enableEventPropagation：true
};
var mmLabel =新的InfoBox（myOptions）;
mmLabel.open（map）;
google.maps.event.addDomListener（window，resize，function（）{
var center = map.getCenter（）;
google.maps.event.trigger （map，resize）;
map.setCenter（center）;
}）;
}）;
解决方案
您需要计算标签的位置它在圈子上。使用几何图库 computeOffset method。
- 距离=圆的半径
- 标题= -90度（西）
- fromLatLng =圆的中心
var radiusOptions = {
strokeColor：＃222c38，
strokeOpacity：1，
strokeWeight：1，
fillColor：＃ffffff，
fillOpacity：0，
map：map，$ b $ center：bblocation，
半径：12872
};
markerCircles = new google.maps.Circle（radiusOptions）;
//计算标签的位置
var labelPosn = google.maps.geometry.spherical.computeOffset（radiusOptions.center，radiusOptions.radius，-90）;
var labelText =8 MILE;
var myOptions = {
content：labelText，
boxStyle：{
background：'＃222c38'，
color：'#ffffff'，
textAlign ：center，
fontSize：8pt，
width：50px
}，
disableAutoPan：true，
pixelOffset：new google.maps.Size （0，0），//左上角的标签
位置：labelPosn，//在圆的左边缘
closeBoxURL：，
isHidden：false，
pane：mapPane，
enableEventPropagation：true
};
代码段：
$（document）.ready（function（）{//设置你的谷歌地图参数var map; var bblocation = new google.maps .LatLng（37.787321，-122.258365）; var map_zoom = 11; //设置谷歌地图选项var map_options = {center：bblocation，zoom：map_zoom，panControl：false，zoomControl：true，mapTypeControl：false，streetViewControl：false，mapTypeId： google.maps.MapTypeId.ROADMAP，scrollwheel：false，disableDefaultUI：true，} //初始化地图map = new google.maps.Map（document.getElementById（'google-container'），map_options）; var radiusOptions = {strokeColor ：＃222c38，stro keOpacity：1，strokeWeight：1，fillColor：#ffffff，fillOpacity：0，map：map，center：bblocation，radius：12872}; markerCircles = new google.maps.Circle（radiusOptions）; //计算标签的位置var labelPosn = google.maps.geometry.spherical.computeOffset（radiusOptions.center，radiusOptions.radius，-90）; var labelText =8 MILE; var myOptions = {content：labelText，boxStyle：{background：'＃222c38'，color：'#ffffff'，textAlign：center，fontSize：8pt，width：50px}，disableAutoPan：true，pixelOffset：新的google.maps.Size（0，0），//左上角的标签位置：labelPosn，//在圆圈左边缘closeBoxURL：，isHidden：false，窗格：mapPane，enableEventPropagation： true}; var mmLabel = new InfoBox（myOptions）; mmLabel.open（地图）; google.maps.event.addDomListener（window，resize，function（）{var center = map.getCenter（）; google.maps.event.trigger（map，resize）; map.setCenter（center）;} ）;}）;
< script src =https：//
$ b
Trying to figure out how to "attach" an InfoBox" to the left edge of a circle drawn in Google Maps (v3).
Here's what I have so far:
http://jsfiddle.net/a1aq9ey8/6/
If you zoom in/out of the map, you'll notice that the InfoBox (8 MILE) position no longer left aligns with the circle... I'd like the infoBox to stay left aligned to the left/centered edge of the circle when the user zooms in or out... Is this possible?
$(document).ready(function(){
//set your google maps parameters
var map;
var bblocation = new google.maps.LatLng(37.787321,-122.258365);
var map_zoom = 11;
//set google map options
var map_options = {
center: bblocation,
zoom: map_zoom,
panControl: false,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: true,
}
//inizialize the map
map = new google.maps.Map(document.getElementById('google-container'), map_options);
var radiusOptions = {
strokeColor:"#222c38",
strokeOpacity:1,
strokeWeight:1,
fillColor:"#ffffff",
fillOpacity:0,
map: map,
center: bblocation,
radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);
var labelText = "8 MILE";
var myOptions = {
content: labelText,
boxStyle: {
background: '#222c38',
color: '#ffffff',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-45, 0),
position: new google.maps.LatLng(37.787321,-122.374365),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var mmLabel = new InfoBox(myOptions);
mmLabel.open(map);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
});
解决方案
You need to calculate the position of the label to put it on the circle. Using the geometry library computeOffset method.
- distance = radius of the circle
- heading = -90 degrees (west)
- fromLatLng = center of the circle
var radiusOptions = {
strokeColor:"#222c38",
strokeOpacity:1,
strokeWeight:1,
fillColor:"#ffffff",
fillOpacity:0,
map: map,
center: bblocation,
radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);
// calculate the position of the label
var labelPosn = google.maps.geometry.spherical.computeOffset(radiusOptions.center,radiusOptions.radius,-90);
var labelText = "8 MILE";
var myOptions = {
content: labelText,
boxStyle: {
background: '#222c38',
color: '#ffffff',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(0, 0), // left upper corner of the label
position: labelPosn, // on the left edge of the circle
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
code snippet:
$(document).ready(function() {
//set your google maps parameters
var map;
var bblocation = new google.maps.LatLng(37.787321, -122.258365);
var map_zoom = 11;
//set google map options
var map_options = {
center: bblocation,
zoom: map_zoom,
panControl: false,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: true,
}
//inizialize the map
map = new google.maps.Map(document.getElementById('google-container'), map_options);
var radiusOptions = {
strokeColor: "#222c38",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#ffffff",
fillOpacity: 0,
map: map,
center: bblocation,
radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);
// calculate the position of the label
var labelPosn = google.maps.geometry.spherical.computeOffset(radiusOptions.center, radiusOptions.radius, -90);
var labelText = "8 MILE";
var myOptions = {
content: labelText,
boxStyle: {
background: '#222c38',
color: '#ffffff',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(0, 0), // left upper corner of the label
position: labelPosn, // on the left edge of the circle
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var mmLabel = new InfoBox(myOptions);
mmLabel.open(map);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
});
html,
body,
#google-container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="google-container"></div>
这篇关于将信息框添加到通过Google地图绘制的圈子的右侧边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
