postgresql - 在表格中单击事件时如何在地图上显示点的位置。我用烧瓶来调用事件&使用openlayers。谢谢

Question

在表格中单击事件时如何在地图上显示点的位置。我使用烧瓶来调用事件并使用 openlayers。问题：“<a href='#map'onclick='mapPanTo”

               <tr>

how to show location of point on map when click event in table. i used flask to call the event & using openlayers. problem: "<a href='#map'onclick='mapPanTo" ...

     <th >Mã phòng </th>
                    <th>Địa chỉ&lt;/th>                        
                    <th>Diện tích (m2)</th> 
                    <th>Giá phòng (triệu đồng)</th>
                    <th>Số người ở tối đa</th>
                    <th>Loại hình nhà trọ&lt;/th>
                    <th>Quy định giới tính</th>
                    <th>Quy định giờ giấc</th>
                    <th>Tiền điện (đồng/1kwh)</th>
                    <th>Tiền nước(đồng/1m3)</th>
                    <th>Tiền wifi(đồng/1 phòng)</th>
                    <th>Tiền xe(đồng/1xe)</th>
                    <th>Họ tên chủ trọ&lt;/th>
                    <th>Số điện thoại</th>
                </tr>
               {% for diadiem in list_phongtro %}
                <tr id='{{diadiem.id_phongtr}}'>
                    <td><ahref='#map'onclick='mapPanTo({{diadiem.x}}{{diadiem.y}})'>{{diadiem.id_phongtr}}</a></td>                                            
                    <td>{{diadiem.diachi}}</td>                     
                    <td>{{diadiem.dientich}}</td>
                    <td >{{diadiem.giaphong }}  </td>   
                    <td>{{diadiem.songuoi}}</td>
                    <td>{{diadiem.loaihinhtr}}</td>
                    <td>{{diadiem.gioitinh}}</td>
                    <td>{{diadiem.giogiac}}</td>    
                    <td>{{diadiem.tien_dien}}</td>
                    <td>{{diadiem.tien_nuoc}}</td>                      
                    <td>{{diadiem.tien_wifi}}</td>
                    <td>{{diadiem.tien_guixe}}</td>
                    <td>{{diadiem.hoten}}</td>
                    <td>{{diadiem.sodienthoai}}</td>                            
                {% endfor %}
                </tr>                                 
                </table>
                 <h4 style ="margin-left: 25px"> Kết quả đối tượng tiện ích <br></h4> 
             <table id="t01"style=" width:100%; font-size:15px; margin-left: 25px;">
                <tr>
                    <th >Mã phòng </th>
                    <th>Địa chỉ&lt;/th>                        
                    <th>Tên đối tượng)</th> 
                    <th>Loại đối tượng</th>                        
                </tr>
               {% for diadiem in list_phongtro %}
               <tr>
                 <td>  <a href='#map' onclick='mapPanTo({{diadiem.x}}, {{diadiem.y}})'>  {{diadiem.id_phongtr}} </td>                                                              
                    <td>{{diadiem.diachi}}</td>                     
                    <td>{{diadiem.name}}</td>
                    <td>{{diadiem.doituong}}</td>   

                {% endfor %}
                </tr>                                 
                </table>
        </div>
        </div>  
    </div>
    </div>
    <div id='maincontent' style="width: 70%;float:right; height: 500px;background: white">      
             <div id='map'  style="width: 80%;margin-left:200px; height: 80%">
          <h4>  </h4>
        </div>   
     </div>
     </div>      
 </div>

<!-- end search -->

 <script>
    function mapPanTo(x, y) {
        if (circle != null) {
            mymap.removeLayer(circle);
        }
        circle = L.circle([x, y], 90);
        mymap.addLayer(circle);

        mymap.flyTo([x,y], 16);
    }


var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var mymap = L.map('map').setView([10.7820,106.6540], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);
   var wms_hcmmap = L.tileLayer.wms("http://localhost:8080/geoserver/LV/wms?", {
          layers: 'phongtro',
            format: 'Image/png',
            transparent: true,

        });
    mymap.addLayer(wms_hcmmap);


    mymap.on('click', function (e) {
        var x = e.latlng.lat;
        var y = e.latlng.lng;
        var xy = ' ' + x + ',' + y;
        $('#current-location').empty().append(xy);
    })

    var circle = null;
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollenter code hereTop = 0;
        document.documentElement.scrollTop = 0;
    };
    </script> 

                    <th >Mã phòng </th>
                    <th>Địa chỉ&lt;/th>                        
                    <th>Diện tích (m2)</th> 
                    <th>Giá phòng (triệu đồng)</th>
                    <th>Số người ở tối đa</th>
                    <th>Loại hình nhà trọ&lt;/th>
                    <th>Quy định giới tính</th>
                    <th>Quy định giờ giấc</th>
                    <th>Tiền điện (đồng/1kwh)</th>
                    <th>Tiền nước(đồng/1m3)</th>
                    <th>Tiền wifi(đồng/1 phòng)</th>
                    <th>Tiền xe(đồng/1xe)</th>
                    <th>Họ tên chủ trọ&lt;/th>
                    <th>Số điện thoại</th>
                </tr>
               {% for diadiem in list_phongtro %}
                <tr id='{{diadiem.id_phongtr}}'>
                    <td><ahref='#map'onclick='mapPanTo({{diadiem.x}}{{diadiem.y}})'>{{diadiem.id_phongtr}}</a></td>                                            
                    <td>{{diadiem.diachi}}</td>                     
                    <td>{{diadiem.dientich}}</td>
                    <td >{{diadiem.giaphong }}  </td>   
                    <td>{{diadiem.songuoi}}</td>
                    <td>{{diadiem.loaihinhtr}}</td>
                    <td>{{diadiem.gioitinh}}</td>
                    <td>{{diadiem.giogiac}}</td>    
                    <td>{{diadiem.tien_dien}}</td>
                    <td>{{diadiem.tien_nuoc}}</td>                      
                    <td>{{diadiem.tien_wifi}}</td>
                    <td>{{diadiem.tien_guixe}}</td>
                    <td>{{diadiem.hoten}}</td>
                    <td>{{diadiem.sodienthoai}}</td>                            
                {% endfor %}
                </tr>                                 
                </table>
                 <h4 style ="margin-left: 25px"> Kết quả đối tượng tiện ích <br></h4> 
             <table id="t01"style=" width:100%; font-size:15px; margin-left: 25px;">
                <tr>
                    <th >Mã phòng </th>
                    <th>Địa chỉ&lt;/th>                        
                    <th>Tên đối tượng)</th> 
                    <th>Loại đối tượng</th>                        
                </tr>
               {% for diadiem in list_phongtro %}
               <tr>
                 <td>  <a href='#map' onclick='mapPanTo({{diadiem.x}}, {{diadiem.y}})'>  {{diadiem.id_phongtr}} </td>                                                              
                    <td>{{diadiem.diachi}}</td>                     
                    <td>{{diadiem.name}}</td>
                    <td>{{diadiem.doituong}}</td>   
                    
                {% endfor %}
                </tr>                                 
                </table>
        </div>
        </div>  
    </div>
    </div>
    <div id='maincontent' style="width: 70%;float:right; height: 500px;background: white">      
             <div id='map'  style="width: 80%;margin-left:200px; height: 80%">
          <h4>  </h4>
        </div>   
     </div>
     </div>      
 </div>

<!-- end search -->

 <script>
    function mapPanTo(x, y) {
        if (circle != null) {
            mymap.removeLayer(circle);
        }
        circle = L.circle([x, y], 90);
        mymap.addLayer(circle);

        mymap.flyTo([x,y], 16);
    }


var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var mymap = L.map('map').setView([10.7820,106.6540], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);
   var wms_hcmmap = L.tileLayer.wms("http://localhost:8080/geoserver/LV/wms?", {
          layers: 'phongtro',
            format: 'Image/png',
            transparent: true,
               
        });
    mymap.addLayer(wms_hcmmap);

    
    mymap.on('click', function (e) {
        var x = e.latlng.lat;
        var y = e.latlng.lng;
        var xy = ' ' + x + ',' + y;
        $('#current-location').empty().append(xy);
    })

    var circle = null;
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollenter code hereTop = 0;
        document.documentElement.scrollTop = 0;
    };
    </script> 

标签： postgresqlflaskopenlayers