个人中心
gpt4 book ai didi

javascript - Google Maps API3 InfoWindow 并查询标记是否在多边形中

转载 作者：行者123 更新时间：2023-12-02 17:34:26 26 4
gpt4 key购买 nike

我目前正在尝试创建一个 map ，其中有一些多边形，然后用户可以输入特定的城市或邮政编码，然后将标记设置为输入的点。如果输入的城市/邮政编码在多边形内，则应该有一个信息窗口，其中包含一些特定的输出，例如“您的位置位于 X 区域”，如果不是，则应该有不同的输出。到目前为止，我得到的是 map 上的两个多边形，您可以输入一个城市并设置标记。但不起作用的是 InfoWindow(在“Click”事件中没有 InfoWindow)，尽管它应该像我使用 Google 开发人员示例一样工作。而且我不知道如何实现所描述的查询，如果标记是否在多边形中，以及与信息窗口形式的特定输出的组合...

抱歉，我的英语真的很糟糕 - 希望你们明白我在说什么!

<!DOCTYPE html>
<html>
  <head>
    <title>Glaswelt24 Montagebereich</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 550px;
        margin: 20px;
        padding: 20px
        width: 200px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=ch"></script>
    <script>

//Deklarierung der Variablen
var geocoder;
var map;


function initialize() {

geocoder = new google.maps.Geocoder();

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(46.8131873, 8.2242101),
   disableDefaultUI: false
  };

  var bermudaTriangle;
  var bermudaTriangle2;

//Deklarierung der neuen Google Maps Karte
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //Inhalt des InfoWindow als Variable deklarieren
      var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

//InfoWindow erstellen und Inhalt festlegen
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  //Montagegebiet 1
    var triangleCoords = [
    new google.maps.LatLng(47.554615, 7.59446),
    new google.maps.LatLng(47.377455, 8.536715),
    new google.maps.LatLng(46.9546699, 7.39487),
    new google.maps.LatLng(47.554615, 7.59446)
  ];

  //Montagegebiet 2
    var triangleCoords2 = [
    new google.maps.LatLng(46.74021, 7.638205),
    new google.maps.LatLng(46.1731573, 8.7772588),
    new google.maps.LatLng(47.04739, 8.3183349),
    new google.maps.LatLng(46.74021, 7.638205)
  ];


  //Aussehen des Montagebiets
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#4BC4DF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#4BC4DF',
    fillOpacity: 0.35
  });

  //Aussehen des Montagegebiets 2
  bermudaTriangle2 = new google.maps.Polygon({
    paths: triangleCoords2,
    strokeColor: '#4BC4DF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#4BC4DF',
    fillOpacity: 0.35
  });

//Setzen der Montagegebiete auf die Karte
  bermudaTriangle.setMap(map);
  bermudaTriangle2.setMap(map);
}


//Aufrufen der Geocode Funktion die einen Marker auf die Karte setzt
function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);

      //Marker auf der Karte
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          animation: google.maps.Animation.DRPOP,
          draggable: false,
          clickable: true
     });

 } else {
      alert('Die Eingabe war falsch');
    }

        });

        //Beim "Event" Klick wird Marker geöffnet 
oogle.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

}

//Initialisieren der Karte
google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
  <!-- HTML Teil  -->
  <h1>Montageservice Google Maps</h1>
  <div id="panel">
      <input id="address" type="textbox" value="Kundeneingabe" onFocus="if(this.value=='Kundeneingabe') this.value=''">
      <input type="button" value="Suche" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

最佳答案

  1. 有一个拼写错误

       oogle.maps.event.addListener(marker, 'click', function() {
    //^ missing a g
  2. 大多数变量都是在 initialize 范围内定义的，但 codeAddress 是在全局范围内定义的，无法访问这些变量
  3. 使用方法google.maps.geometry.poly.containsLocation检测标记是否在多边形内(注意:您必须包含几何库，默认情况下不会加载)

修复代码(我删除了不相关的内容):

<小时/> 
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&language=ch&libraries=geometry"></script>
<script>
function initialize() {

  var geocoder      = new google.maps.Geocoder(),
      mapOptions    = { zoom: 8,
                        center: new google.maps.LatLng(46.8131873, 8.2242101)
                      },
      //use only a single marker
      marker        = new google.maps.Marker(),
      infowindow    = new google.maps.InfoWindow(),

      map           = new google.maps.Map(document.getElementById('map-canvas'), 
                                          mapOptions),
      //store the polygons in an array for iteration
      polys         = [];       
      polys[0]      = new google.maps.Polygon({
                        title:'Montagegebiet 1',
                        paths: [
                            new google.maps.LatLng(47.554615, 7.59446),
                            new google.maps.LatLng(47.377455, 8.536715),
                            new google.maps.LatLng(46.9546699, 7.39487),
                            new google.maps.LatLng(47.554615, 7.59446)
                          ],
                        map:map
                      });

      polys[1]      = new google.maps.Polygon({
                        title:'Montagegebiet 2',
                        paths: [
                            new google.maps.LatLng(46.74021, 7.638205),
                            new google.maps.LatLng(46.1731573, 8.7772588),
                            new google.maps.LatLng(47.04739, 8.3183349),
                            new google.maps.LatLng(46.74021, 7.638205)
                          ],
                         map:map
                      });


      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });

      //define the codeAdress-function in the scope of initialize
      //to be able to access all variables without declaring them global
      window.codeAddress  = function() {

        var address = document.getElementById('address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var position = results[0].geometry.location,
                //default-content for infowindow
                content  = 'Die Eingabe befindet sich in keinem der Bereiche';
            map.setCenter(position);

            marker.setOptions({
              map:map,
              animation: google.maps.Animation.DRPOP,
              position: position
            });

            for(var i=0;i<polys.length;++i){
              //check if the latLng is placed within the polygon
              if(google.maps.geometry.poly.containsLocation(position,polys[i])){
                //if it does, update the  content for the infowindow
                content = 'Die Eingabe wurde in '+polys[i].title+' lokalisiert';
                //and leave the loop
                break;
              }
            } 
            //open the infowindow
            infowindow.setOptions({
                  map:map,
                  position:position,
                  content:content
            });
          } 
          else {
            //hide the infowindow
            infowindow.setMap(null);
            alert('Die Eingabe lieferte kein Ergebnis');
          }
        });
      }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<小时/>

演示:http://jsfiddle.net/doktormolle/nYebu/

关于javascript - Google Maps API3 InfoWindow 并查询标记是否在多边形中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22750406/

26 4 0
文章推荐： javascript - 将自定义文本添加到 Facebook 共享弹出窗口
文章推荐： javascript - this.property 和带冒号的 property 的区别
文章推荐： javascript - 如何让项目默认隐藏然后用 jquery 按钮显示？
文章推荐： javascript - 为什么我的文件在我的本地环境中找到，但在我的cpanel服务器上却出现404s？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com