如果我在文本框中输入值等于多边形值，我没有收到警报消息 [英] if i enter value in text box equalent to polygon value i'm not getting alert msg

问题描述

如果我拖动多边形上的标记释放，我得到了一个警报，但如果我输入long，纬度值通过文本框，标记移动但没有警报消息，（marker0，'dragend'，函数（e）而不是dragend是否存在事件来抓取文本框中的值，请指导我

<！DOCTYPE html>< html>< head>< script src =http://maps.googleapis.com/maps/api/js?libraries=geometry>< / script>< script>函数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（米ap）; 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（{path：zone，strokeColor：＃0000FF，strokeOpacity：1.5，strokeWeight：2，fillColor：＃ff0000，fillOpacity：1，clickable：false}）; dzone.setMap （地图）; var dzone0 = new google.maps.Polygon（{path：zone0，strokeColor：＃0000FF，strokeOpacity：1.5，strokeWeight：2，fillColor：＃ff0000，fillOpacity：1，clickable：false}）; dzone0.setMap （地图）; 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 =googleMapstyle =width：500px; height：380px;>< / div> Langtitude< input id =xtype =numbervalue =25.774252onkeyup =initialize（'x'）>纬度<输入id =ytype =numbervalue =-80.190262onkeyup =initialize（'y'）>< br> < br><按钮类型=按钮onclick =初始化（）>提交< /按钮> &安培; NBSP; < / div>< / body>< / html>

h2_lin>解决方案

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

  google.maps.event.trigger（MARKER1， 'dragend'，{经纬度：marker1.getPosition（）}）; 
  

代码片段：

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（{path：zone，strokeColor：＃0000FF，strokeOpacity：1.5，strokeWeight：2，fillColor：＃ff0000，fillOpacity：1，clickable：false}）; dzone.setMap （地图）; var dzone0 = new google.maps.Polygon（{path：zone0，strokeColor：＃0000FF，strokeOpacity：1.5，strokeWeight：2，fillColor：＃ff0000，fillOpacity：1，clickable：false}）; dzone0.setMap （地图）; 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 =googleMapstyle =width：500px; height：380px;>< / div> Langtitude< input id =x onkeyup =初始化（'y'）/>纬度< input id =ytype =numbervalue =-80.190262onkeyup =initialize '）/>< br> < br><按钮类型=按钮onclick =初始化（）>提交< /按钮> &安培; NBSP; < / div>

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>

解决方案

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>

这篇关于如果我在文本框中输入值等于多边形值，我没有收到警报消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！