谷歌地图 - 获取infoWindow内容

-1

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PlaceID finder</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <script src="~/Scripts/jquery-3.1.0.min.js"></script> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     .controls { 
     background-color: #fff; 
     border-radius: 2px; 
     border: 1px solid transparent; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     box-sizing: border-box; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     height: 29px; 
     margin-left: 17px; 
     margin-top: 10px; 
     outline: none; 
     padding: 0 11px 0 13px; 
     text-overflow: ellipsis; 
     width: 400px; 
     } 

     .controls:focus { 
     border-color: #4d90fe; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" 
     placeholder="Enter a location"> 
    <div id="map"></div> 
<input style="margin-left:5px" type="button" class="btn btn-primary" value="Add Store Point" id="addNewStore" /> 

    <script> 
     // This sample uses the Place Autocomplete widget to allow the user to search 
     // for and select a place. The sample then displays an info window containing 
     // the place ID and other information about the place that the user has 
     // selected. 

     // This example requires the Places library. Include the libraries=places 
     // parameter when you first load the API. For example: 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -33.8688, lng: 151.2195}, 
      zoom: 13 
     }); 

     var input = document.getElementById('pac-input'); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 

     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
      map: map 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

     autocomplete.addListener('place_changed', function() { 
      infowindow.close(); 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
      return; 
      } 

      if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
      } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
      } 

      // Set the position of the marker using the place ID and location. 
      marker.setPlace({ 
      placeId: place.place_id, 
      location: place.geometry.location 
      }); 
      marker.setVisible(true); 

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
       'Place ID: ' + place.place_id + '<br>' + 
       place.formatted_address); 
      infowindow.open(map, marker); 
     }); 
     } 

$("#addNewStore").on("click", function() { 
      //i need these variables 
      //...=place.name; 
      //...=place.place_id; 
      //...=place.formatted_address; 

      /$.ajax({ 
       url: '/Store/Add', 
       type: 'POST', 
       data: { 
        PlaceName:place.name,PlaceID:place.place_id, Address:place.formatted_address 
       }, 
       success: function (results) { 
        alert("Successfully added new store"); 
       }, error: function (data) { 
        alert("failed to add store"); 
       } 
      }); 
     }); 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" 
     async defer></script> 
    </body> 
</html>

该示例来自谷歌地图文档，我觉得它对我非常有用。我的问题是，我不能用我的匿名函数，该按钮调用信息窗口的内容。我尝试了两种构造函数的方法，但我没弄明白。预先感谢您^^谷歌地图 - 获取infoWindow内容

来源

2016-11-23 Stanislav Chankov

什么是你的问题？您是否尝试将infowindow变量设为全局变量？ – geocodezip

是的，我试图让所有的信息窗口的内容为不同的变量，如果可能的。 –

如果你想在'initMap'之外使用'place'对象，使它成为全局对象。例如。在'函数initMap（）'设置'var place;'之前'并且记得从'var place = autocomplete.getPlace（）;' – MKiss

我的老师给我一个简单的方法如何做到这一点。

在你应该没有任何东西视觉添加DIV身体。将标记设置为可见之后，获取类.hidden-data，并且可以为标记的每个属性添加尽可能多的属性。

<div class="hidden-data" data-place="" data-location="" data-address=""></div> 
       marker.setVisible(true); 

       $(".hidden-data").attr('data-place', place.name); 
       $(".hidden-data").attr('data-location', place.geometry.location); 
       $(".hidden-data").attr('data-address', place.formatted_address);

jQuery的功能，这将在单击按钮调用应该是这样的：

$("#addNewStore").click(function() { 
    var a = $(".hidden-data").attr('data-place'); 
    var a = $(".hidden-data").attr('data-location'); 
    var a = $(".hidden-data").attr('data-address'); 
});

来源

2016-11-24 18:42:12

谷歌地图 - 获取infoWindow内容

回答

相关问题