如果我在文本框中输入与多边形值相等的值,则不会获得警报信息

时间:2015-04-24 09:05:10

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

如果我在多边形上拖动标记释放我得到了一个警告,但如果我输入长,纬度值通过文本框,标记移动但没有警报消息,(marker0,' dragend',函数(e)代替dragend是否有任何事件要从文本框中获取值,请指导我



<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
function initialize()
{
  x = document.getElementById("x").value ;
  y = document.getElementById("y").value ;
  var latLng = new google.maps.LatLng(x, y);
var mapProp = {
  center:latLng,
  zoom:15,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker1=new google.maps.Marker({
  position:latLng,title: 'Point A',
  draggable: true,
  });
marker1.setMap(map);
var ne0=new google.maps.LatLng(25.774252, -80.190262);
var ne01=new google.maps.LatLng(18.466465, -66.118292);
var ne02=new google.maps.LatLng(32.321384, -64.75737);

var n0=new google.maps.LatLng(23.774252, -78.190262);
var n01=new google.maps.LatLng(17.466465, -65.118292);
var n02=new google.maps.LatLng(16.466465, -63.118292);
var n03=new google.maps.LatLng(30.321384, -64.75737);     
var zone = [
    n0,n01,n02,n03
  ];
 var zone0 = [
    ne0,ne01,ne02,ne0
  ];
  var dzone = new google.maps.Polygon({
    paths: zone,
strokeColor:"#0000FF",
  strokeOpacity:1.5,
  strokeWeight:2,
  fillColor:"#ff0000",
  fillOpacity:1,clickable: false 
  });dzone.setMap(map);
  
var dzone0 = new google.maps.Polygon({
    paths: zone0,
strokeColor:"#0000FF",
  strokeOpacity:1.5,
  strokeWeight:2,
  fillColor:"#ff0000",
  fillOpacity:1,clickable: false 
  });dzone0.setMap(map);

  google.maps.event.addListener(marker1, 'dragend', function(e){
    var result;
    if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {
    
 window.alert("Danger!");;
document.body.style.backgroundColor = "red";
    } 
 else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {
      
 window.alert("Danger!");;
document.body.style.backgroundColor = "red";
    } else {
        document.body.style.backgroundColor = "white";
    }

   var m = new google.maps.Marker({
      position: e.latLng,
      map: map,
     icon:'pi.png'
    })
  });
}

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

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
Langtitude <input id="x" type="number" value = "25.774252" onkeyup="initialize('x')">

latitude <input id="y" type="number"value = "-80.190262" onkeyup="initialize('y')"><br> <br>
<button type="button" onclick="initialize()">Submit</button> &nbsp;

  </div>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

使用表单移动标记时触发dragend事件。

google.maps.event.trigger(marker1,'dragend',{latLng:marker1.getPosition()});

代码段:

&#13;
&#13;
function initialize()
{
x = document.getElementById("x").value ;
y = document.getElementById("y").value ;

  var latLng = new google.maps.LatLng(x, y);

var mapProp = {
  center:latLng,
  zoom:15,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker1=new google.maps.Marker({
  position:latLng,title: 'Point A',

 draggable: true,

  });

marker1.setMap(map);

var ne0=new google.maps.LatLng(25.774252, -80.190262);
var ne01=new google.maps.LatLng(18.466465, -66.118292);
var ne02=new google.maps.LatLng(32.321384, -64.75737);

var n0=new google.maps.LatLng(23.774252, -78.190262);
var n01=new google.maps.LatLng(17.466465, -65.118292);
var n02=new google.maps.LatLng(16.466465, -63.118292);
var n03=new google.maps.LatLng(30.321384, -64.75737);
 
var zone = [
    n0,n01,n02,n03
  ];
 var zone0 = [
    ne0,ne01,ne02,ne0
  ];

  var dzone = new google.maps.Polygon({
    paths: zone,
strokeColor:"#0000FF",
  strokeOpacity:1.5,
  strokeWeight:2,
  fillColor:"#ff0000",
  fillOpacity:1,clickable: false 
  });dzone.setMap(map);
  
var dzone0 = new google.maps.Polygon({
    paths: zone0,
strokeColor:"#0000FF",
  strokeOpacity:1.5,
  strokeWeight:2,
  fillColor:"#ff0000",
  fillOpacity:1,clickable: false 
  });dzone0.setMap(map);

  google.maps.event.addListener(marker1, 'dragend', function(e){
    var result;
    if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {
    
 window.alert("Danger!");;
document.body.style.backgroundColor = "red";
    } 
 else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {
      
 window.alert("Danger!");;
document.body.style.backgroundColor = "red";
    } else {
        document.body.style.backgroundColor = "white";
    }

   var m = new google.maps.Marker({
      position: e.latLng,
      map: map,
     icon:'pi.png'
    })
  });
  google.maps.event.trigger(marker1,'dragend',{latLng:marker1.getPosition()});
}

google.maps.event.addDomListener(window, 'load', initialize);
&#13;
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>
Langtitude <input id="x" type="number" value = "25.774252" onkeyup="initialize('x')" />

latitude <input id="y" type="number"value = "-80.190262" onkeyup="initialize('y')" /><br> <br>
<button type="button" onclick="initialize()">Submit</button> &nbsp;

  </div>
&#13;
&#13;
&#13;