Question

我为2个地点创建了2个单选按钮。现在点击1个单选按钮后，它应显示该位置的谷歌地图。这是我尝试过的（我不知道如何使用＆＃39; this.func（）＆＃39;）来调用函数：

SELECT DISTINCT ?sr WHERE {
  {
  ?sr rdf:type <http://data.sample.com/vocab/StudentRecord>.
  ?sr <http://data.latize.com/vocab/classRoom> <http://data.latize.com/resource/ClassRoom/1156>.
  }
UNION
  { 
        ?hcvr rdf:type <http://data.sample.com/vocab/HealthCentreVisitRecord>.
        ?hcvr <http://data.sample.com/vocab/studentRecord> ?sr.
    }
}
LIMIT 1000

 <form>
 <input type="radio" name="browser" onclick="myFunction(this.value)"  value="Belgaum">Belagavi<br>
 <input type="radio" name="browser" onclick="myFunction(this.value)" value="Bangalore">Bangalore<br>


 <input type="text" id="result">//Treat this as location 1
 <div id="map"  style="width:100%;height:200px;background:yellow;"    frameborder="0" style="border:0"></div>

 <script>
 function myMap() {
 var mapOptions = {
 center: new google.maps.LatLng(15.835015,74.517537),
 zoom: 25,
 mapTypeId: google.maps.MapTypeId.HYBRID
 }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var marker = new google.maps.Marker({
      position: GIT,
      map: map
    });

}
</script>


<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>

Answer 1

    <!DOCTYPE html>
    <html>
       <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       </head>
       <body>
          <h1>Google map changes while radio button changed</h1>
          <input type="radio" name="browser" data-lat="15.8497" data-long="74.4977" value="Belgaum">Belagavi<br>
          <input type="radio" name="browser" data-lat="12.9716" data-long="77.5946" value="Bangalore">Bangalore<br>
          <div id="map"  style="width:100%;height:200px;background:yellow;"    frameborder="0" style="border:0"></div>
          <script>
             $(document).ready(function() {
             	/*for first time when radio button not selected*/
                 myMap('15.835015', '74.517537');
                 $('input[type=radio][name=browser]').change(function() {
                     var lat = $(this).data('lat');
                     var long = $(this).data('long');
                     myMap(lat, long)
                 });
             });
             
             function myMap(lat, long) {
                 var mapOptions = {
                     center: new google.maps.LatLng(lat, long),
                     zoom: 25,
                     mapTypeId: google.maps.MapTypeId.HYBRID
                 }
                 var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                 var marker = new google.maps.Marker({
                     map: map
                 });
             
             }
             
          </script>
          <script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
       </body>
    </html>`enter code here`

如何使用单选按钮调用谷歌地图？

1 个答案: