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

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" />

笔记：

1. 如果您使用的是响应式图像，请确保您的透明 gif 与最终图像的高度与宽度之比相同，以避免页面重排。

2. 您还必须在onError回调中加载different.jpg。