if i enter value in text box equalent to polygon value i'm not getting alert msg

问题

If I drag marker release on polygon I got an alert but if I enter long, latitude values through text box, marker moves but no alert msg ,(marker0, 'dragend', function(e) instead of dragend is there any event to grap values from text box, pls guide me

<!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>

回答1:

Trigger the dragend event when you use the form to move the marker.

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

code snippet:

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);

<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>

来源：https://stackoverflow.com/questions/29843155/if-i-enter-value-in-text-box-equalent-to-polygon-value-im-not-getting-alert-msg

标签

javascript

jquery

google-maps

google-maps-api-3