点击后获取位置数据并显示在Google地图上

时间:2018-11-18 19:54:35

标签: jquery json

我有一个通过data.json文件填充的虚假地址列表。这些地址中的每一个都有纬度和经度。

我该如何编写点击功能来读取该地址的经纬度位置?

当前,当用户输入邮政编码时,第一个地址经纬度和多头位置会显示在Google地图中。

jquery

$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
            //console.log('json')
          $.each(data, function(key, value) {
             if (value.address.postcode.search(expression) != -1) {
                    //console.log(value)
                    //COURIER ADDRESS DETAILS
                $('#result').append('<li data-contentid="' + key + '" 
                                         class="list-group-item courier">
                                      <div class="c-image mr-3">
                                       <img src="../images/hermes-logo.jpg" class="w-100">
                                      </div><div class="result-address">
                                      <div class="c-name font-weight-bold">
                                           ' + value.name + ' 
                                      </div>
                                      <div class="address">
                                         ' + value.address.name + ',
                                         ' + value.address.line1 + ',
                                         ' + value.address.town + ',
                                         ' + value.address.county + ',
                                         ' + value.address.postcode + '
                                      </div>
                               </div>
                         </li>');

             var mapProp = {
                        center: new google.maps.LatLng(
                                          value.location.latitude, 
                                          value.location.longitude),
                          zoom: 5,
                       };
           var map = new google.maps.Map(
                                       document.getElementById("googleMap"), 
                                       mapProp);
           var myLatlng = new google.maps.LatLng(
                                       value.location.latitude,
                                       value.location.longitude);
           var marker = new google.maps.Marker({
                                       position: myLatlng,
                                       title:"Hello World!"
                          });
                    marker.setMap(map);

                }
            });

        });

任何想法或建议都很好。

谢谢

0 个答案:

没有答案