Question

我正在尝试使用maxmind geoip2付费计划在网页上显示/回显用户的位置，我还想根据州/城市名称输出显示不同的图像。

例如，如果我的网页显示该用户来自纽约，那么我想显示一张纽约的简单图片，如果脚本检测到该用户来自华盛顿，则该图像应加载到华盛顿。

这是我尝试过但不起作用的代码段。

<script type="text/javascript">

 if 
$('span#region=("New York")') {
  // Display your image for New York
  document.write("<img src='./images/NY.jpg'>");
}
  else {
    document.write("<img src='./images/different.jpg'>");
  }


</script>

这是标题中的代码。

  <script src="https://js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>

<script>
      var onSuccess = function(geoipResponse) {
          var cityElement = document.getElementById('city');
          if (cityElement) {
              cityElement.textContent = geoipResponse.city.names.en || 'Unknown city';
          }

          var countryElement = document.getElementById('country');
          if (countryElement) {
              countryElement.textContent = geoipResponse.country.names.en || 'Unknown country';
          }

          var regionElement = document.getElementById('region');
          if (regionElement) {
              regionElement.textContent = geoipResponse.most_specific_subdivision.names.en || 'Unknown region';
          }


      };

      var onError = function(error) {
          window.console.log("something went wrong: " + error.error)
      };

      var onLoad = function() {
          geoip2.city(onSuccess, onError);
      };

      // Run the lookup when the document is loaded and parsed. You could
      // also use something like $(document).ready(onLoad) if you use jQuery.
      document.addEventListener('DOMContentLoaded', onLoad);
      </script>

当页面加载时，这个简单的跨度会在HTML的正文中显示状态名称。

<span id="region"></span>

现在唯一的问题是图像不会根据用户位置而改变，我在这里做什么错了？

Answer 1

您的示例缺少一些代码，但看起来您正在立即运行一些代码，并在回调中运行了一些代码，一种更好的方法是将所有代码都包含在回调中：

            // whitelist of valid image names
            var validImages = ["NJ", "NY"];
            // get the main image you want to replace
            var mainImage = document.getElementById('mainImage');
            if (mainImage) {
                // ensure there is a subdivision detected, or load the default
                if(geoipResponse.subdivisions[0].iso_code && validImages.includes( && geoipResponse.subdivisions[0].iso_code)){
                    mainImage.src = "./images/" + geoipResponse.subdivisions[0].iso_code + ".jpg";
                } else {
                    mainImage.src = "./images/different.jpg";
                }
            }

然后将要替换的图像设为：

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" id="mainImage" />

注意：

如果您使用的是自适应图像，请确保透明gif与最终图像的高宽比相同，以避免页面重排。
您还必须在different.jpg回调中加载onError。

根据位置数据输出更改图像

1 个答案: