显示用户地理位置信息的JavaScript代码

加入一些用户地理位置信息到你的Landingpage无疑将会极大提高访客的注意力，某些情况下会很大程度上提高你Campaign的ROI。要实现这个功能我们有免费版和收费版选择，毫无疑问免费版数据信息会少很多，比如免费版可能只会提供省级的数据，而收费版可以提供具体城市的数据。本篇中的代码是Maxmind提供的免费版本，金橙子海外联属营销网在US测试表现良好。

1、首先将下列JavaScript包含在你Landingpage的<head>标签中。

<script type="text/javascript" src="http://www.jsgeoip.com/geoip.js"></script>

2、如果你使用JQuery来改变Document中元素的值，那么请将如下代码加入到你Landingpage的<head>标签中。根据你在文件中所需要展现地理位置的个数，每一行改变一个元素。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$('#city1').html(geoip_city());
		$('#city2').html(geoip_city());
		$('#city3').html(geoip_city());
		$('#city4').html(geoip_city());
	});
</script>

或者你不用JQuery来改变文件中元素的值，可以用如下代码替换：

<script>
	document.getElementById('city1').innerHTML = geoip_city();
	document.getElementById('city2').innerHTML = geoip_city();
	document.getElementById('city3').innerHTML = geoip_city();
	document.getElementById('city4').innerHTML = geoip_city();
</script>

3、最后就是在正常的HTML代码中实现地理位置的显示了，代码如下：

<span id="city1">Beijing</span>
<span id="city2">Beijing</span>

注意，为避免代码分析用户真实地理位置失败，请在实现地理位置显示的代码中填写一个默认值，如上面代码中的Beijing

如之前所描述，免费版本可能会有一些缺陷或者不太精确，或者你需要更多数据，比如国家、省市、邮编等等，你就需要选择收费版本了，请访问Maxmind具体查看。

Related Posts