使用 SSMS 数据库的 Google Maps API答案

【问题标题】：Google Maps API using SSMS Database使用 SSMS 数据库的 Google Maps API
【发布时间】：2019-06-24 08:49:36
【问题描述】：

我有一个应用程序，我想展示美国各地即将举行的博览会。我最初被指向 Places API 的方向，然后我被指向 Geocoding API。到目前为止，没有任何效果。代表这么多不同的来源，我的代码会显得断断续续，并试图将事物组合在一起以使其工作。

我正在使用 SQL Server 数据库，并且我有一个包含 ExpoLocations 的表，我有地址、城市、州和邮政编码的字段。我正在尝试使用 c# 创建一个 javascript 数组以插入我的 API。我没有收到任何控制台错误。在我的 Inspector 中，当我查看源代码时，它会返回数组中我需要的项目。我的页面上根本没有显示的地图。

所有代码都在我的视图中

div> id=mapAPI

    // #region MAP API       
    var expos = [];
    @foreach (var item in Model.ToList())
    {
        @:var request = { types: 'street_address', formatted_address: '@item.Address' + '@item.City' + ',' + '@item.State', address_components:{types: 'street_address'}, partial_match: true}
            @:expos.push(request);
            }



    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(37.09024, -95.712891);
        var mapOptions = {
            zoom: 4,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('mapAPI'), mapOptions);
    }

    function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(request, status) {
            if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    // #endregion

我在我的脚本中使用这个 API

https://maps.googleapis.com/maps/api/js?key=MYAPIKEY

【问题讨论】：

标签： javascript c# sql-server google-maps google-maps-api-3

【解决方案1】：

确保在文档呈现后实际调用了 initialize()。
确保您的地图 div 具有最小高度。

您至少应该能够在您的页面上看到地图。

那么，问题是来自geocoder.geocode 的回调的响应变量名为request，但您使用results[0].geometry.location 实际设置地图位置。

将回调中的名称更改为 results，当调用 codeAddress 时，您应该会看到您的地理编码位置的标记。

如果您想对结果数组中的每个地址进行地理编码，您将需要做一些额外的工作，但希望这至少应该为您呈现地图。

您应该能够使用您的 API 密钥运行下面的 sn-p。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE"></script>
<script>
  var geocoder;
  var map;

  function initialize() {
    console.log("initialize called");
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.09024, -95.712891);
    var mapOptions = {
      zoom: 4,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('mapAPI'), mapOptions);
  }

  function codeAddress() {
    console.log("codeAddress called!");
    var address = document.getElementById('address').value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
  $(document).ready(function() {
    console.log("ready!");
    initialize();
  });
</script>
<div id="mapAPI" style="min-width:100px;min-height:100px"></div>
<input id="address" />
<button onClick="codeAddress()">Geocode Me!</button>

【讨论】：