Javascript 如何在标记离开给定区域时获取警报
我是谷歌地图的新手，我想在标记不是给定区域时获得警告，我已经创建了地图，并添加了一个圆圈来表示标记可以移动的区域 这是我的密码Javascript 如何在标记离开给定区域时获取警报,javascript,google-maps,Javascript,Google Maps,我是谷歌地图的新手，我想在标记不是给定区域时获得警告，我已经创建了地图，并添加了一个圆圈来表示标记可以移动的区域 这是我的密码 <html> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/java
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
// Basic Variables
var map, marker, myLatlng;
var Location;
var LAT = 6.9342150;
var LONG = 79.8919810;
function loadMap() {
myLatlng = new google.maps.LatLng(LAT, LONG);
var mapOptions = {
zoom: 14,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// To add the marker to the map, use the 'map' property
marker = new google.maps.Marker({
position: myLatlng,
map: map,
// This allows me to drag the mark through map
draggable: true,
// Bounce the marker when it adds to the Map
animation: google.maps.Animation.DROP,
title: "Hello World!"
});
var CicleOption = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: myLatlng,
radius: 1000
};
new google.maps.Circle(CicleOption);
// To add the marker to the map, call setMap();
marker.setMap(marker);
}
</script>
</head>
<body onload="loadMap()">
<div id="map-canvas" style="height:350px;"></div>
</body>
//基本变量
变量图，标记，myLatlng；
var定位；
var LAT=6.9342150；
var LONG=79.8919810；
函数loadMap（）{
myLatlng=新的google.maps.LatLng（LAT，LONG）；
变量映射选项={
缩放：14，
中心：myLatlng
}
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//要将标记添加到地图，请使用“地图”属性
marker=新的google.maps.marker({
职位：myLatlng，
地图：地图，
//这使我可以通过地图拖动标记
真的，
//将标记添加到地图时反弹标记
动画：google.maps.animation.DROP，
标题：“你好，世界！”
});
变量循环={
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：myLatlng，
半径：1000
};
新的google.maps.Circle（CicleOption）；
//要将标记添加到映射，请调用setMap（）；
marker.setMap（marker）；
}
谢谢。我有一个解决方案给你，看第65到77行。当标记放置在圆的外部时，它将再次移动到圆的中间，并且地图将再次居中
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
// Basic Variables
var map, marker, myLatlng;
var Location;
var LAT = 6.9342150;
var LONG = 79.8919810;
function loadMap() {
myLatlng = new google.maps.LatLng(LAT, LONG);
var mapOptions = {
zoom: 14,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// To add the marker to the map, use the 'map' property
marker = new google.maps.Marker({
position: myLatlng,
map: map,
// This allows me to drag the mark through map
draggable: true,
// Bounce the marker when it adds to the Map
animation: google.maps.Animation.DROP,
title: "Hello World!"
});
var CicleOption = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: myLatlng,
radius: 1000
};
new google.maps.Circle(CicleOption);
// To add the marker to the map, call setMap();
marker.setMap(map);
// THIS IS ADDED
google.maps.event.addListener(marker,'dragend',function(event) {
var currPos = new google.maps.LatLng(event.latLng.k, event.latLng.B);
var dist = getDistance(currPos, CicleOption.center);
if(dist > CicleOption.radius){
alert('Marker is outside');
marker.setPosition(CicleOption.center);
map.setCenter(CicleOption.center);
}
});
}
var rad = function(x) {
return x * Math.PI / 180;
};
var getDistance = function(p1, p2) {
var R = 6378137; // Earth’s mean radius in meter
var dLat = rad(p2.lat() - p1.lat());
var dLong = rad(p2.lng() - p1.lng());
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) *
Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d; // returns the distance in meter
};
</script>
</head>
<body onload="loadMap()">
<div id="map-canvas" style="height:350px;"></div>
</body>
下面是一个例子：您可以通过添加dragend侦听器来检查标记的latlng是否仍在圆的范围内。移动标记时，必须计算圆的中间和标记的当前位置之间的距离。检查距离是否大于半径，然后发出警报。在小提琴中，您使用的是LatLngBounds contains方法。LatLngBounds对象是矩形的，而不是圆形的，因此在拐角处不起作用。发布代码中的等式看起来是正确的
dist>CicleOption.radiusvar cirlce = new google.maps.Circle(options);
var bounds = circle.getBounds();
var currPos = new google.maps.LatLng(lat, lng);
bounds.contains(currPos);