打造属于自己的谷歌Maps版博客公告【演示+源码】

最新推荐文章于 2024-04-26 00:04:22 发布

PHP淮北

最新推荐文章于 2024-04-26 00:04:22 发布

阅读量1.4k

点赞数 1

分类专栏：谷歌maps&专题文章标签：公告 function javascript 腾讯 api json

本文链接：https://blog.csdn.net/php10086/article/details/6763336

版权

谷歌maps&专题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

很喜欢博客园可以自定义代码的风格，今天在装饰自己的公告时候突然想加个地图来显示游客的当前位置，想到做到，那就自己动手做一下，

地图：谷歌地图jsV3版先看演示：演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处地图

设计思路：根据游客的ip信息获得地理信息，进而查询地图，再次显示游客的当前地址

第一步获得游客的ip信息

由于公告只能加html代码，肯定不可以使用服务端程序来获取到游客的ip，那就只能通过js方式获得游客的ip，第一个想法就是使用

腾讯的ip开放接口：可以获得一个数组信息

 
<script language="javascript" type="text/javascript" src="http://fw.qq.com/ipaddress"></script>
 
<script>document.write("你的IP是："+IPData[0]+"，来自："+IPData[2]);</script>

　　但是放在博客园公告上面却不能显示，原因是这个数组是gbk编码的，而博客园是utf8格式，想自己转码，但是嫌麻烦

我又想到新浪的一个ip接口，这个接口返回的是json格式的数据

 
<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
 
<script type="text/javascript">document.write("欢迎来自："+remote_ip_info.country+remote_ip_info.province+remote_ip_info.city+"的朋友！");
 
 
 
</script>

　　这个接口的数据是utf8格式，正合适，下面就是用这个接口获得ip信息,备注：ip本来就是一个粗略的估算，再说影响获得你ip的接口因素有很多，最终ip信息的准确还要看新浪的ip接口，个人感觉腾讯的ip接口比较精确可用到县一级，新浪的ip接口只能到市一级！腾讯ip需要转utf8格式，你可以试试看

这里可以参考我的另外一个博客：获得ip地理信息的几种方法【最全】

呵呵有点广告嫌疑了

第二根据谷歌地图查询游客位置

引入谷歌地图

谷歌入门的人可以参考谷歌地图api文档有详细说明： 谷歌地图开发之入门

这个是我转载谷歌api的，比较适合入门级的

 
      <!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型-->   
 
      <script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script>

设置谷歌地图的参数

zoom是地图显示的缩放级数，center是地图的中心位置，maptypeid是地图的类型，address主要获取查询到的地理信息，

gecode主要是谷歌地图吧地理信息转化为经度纬度值，title主要是点击时候的名称，icon主要是锚点的背景图像，没有的话就是是默认值,没有找到合适的图片这里我没有开启

这个在我另外一个博客也有详细说明：基于ip的手机地理定位

 
      <script language="javascript">   
 
       var geocoder;   
 
        var map;   
 
        function initialize() {   
 
          geocoder = new google.maps.Geocoder();   
 
          var latlng = new google.maps.LatLng(39.9493, 116.3975);   
 
          var myOptions = {   
 
            zoom: 15,   
 
            center: latlng,   
 
            mapTypeId: google.maps.MapTypeId.ROADMAP   
 
          }   
 
          var address = remote_ip_info.country+remote_ip_info.province+remote_ip_info.city;
 
          document.getElementById('add').innerHTML = "欢迎来自："+address+"的朋友！";
 
         var img='http://avatar.csdn.net/B/9/A/1_youacai.jpg'; 
 
          if (geocoder) {   
 
            geocoder.geocode( { 'address': address}, function(results, status) {   
 
              if (status == google.maps.GeocoderStatus.OK) {  
 
                map.setCenter(results[0].geometry.location);   
 
                var marker = new google.maps.Marker({   
 
                    map: map,    
 
                    position: results[0].geometry.location,   
 
                     title:'位置', 
 
                    // icon:img 
 
                });  
 
              }    
 
            });   
 
          }   
 
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   
 
        }  
 
        </script>

　最后放置谷歌地图的容器　

 
      <body onload="initialize()"> 
 
       <div id="add"  style=" height:26px;color:#F00;font-size: 18pt;"></div>
 
       <div id="map_canvas" style="width: 380px; height: 280px;"></div>

　下面大家预览一下效果：演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处。呵呵　，由于博客园公告不支持谷歌的信息窗口弹出和监听事件，所以只是做一个简单的显示游客的位置的统计！欢迎各位拍砖留言如果有好的建议也希望和你一起交流！我的博客公告有演示，可以看一下，如果有什么bug，也欢迎及时告诉我！

完整代码：把它加到自己的公告里面就可以了，演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处

 
        <script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
 
        02  
 
        03 <!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型-->   
 
        04 <script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script>   
 
        05 <script language="javascript">   
 
        06  var geocoder;   
 
        07   var map;   
 
        08   function initialize() {   
 
        09     geocoder = new google.maps.Geocoder();   
 
        10     var latlng = new google.maps.LatLng(39.9493, 116.3975);   
 
        11     var myOptions = {   
 
        12       zoom: 15,   
 
        13       center: latlng,   
 
        14       mapTypeId: google.maps.MapTypeId.ROADMAP   
 
        15     }   
 
        16     var address = remote_ip_info.country+remote_ip_info.province+remote_ip_info.city;
 
        17     document.getElementById('add').innerHTML = "欢迎来自："+address+"的朋友！";
 
        18    var img='http://avatar.csdn.net/B/9/A/1_youacai.jpg'; 
 
        19   
 
        20     if (geocoder) {   
 
        21       geocoder.geocode( { 'address': address}, function(results, status) {   
 
        22         if (status == google.maps.GeocoderStatus.OK) {  
 
        23           map.setCenter(results[0].geometry.location);   
 
        24           var marker = new google.maps.Marker({   
 
        25               map: map,    
 
        26               position: results[0].geometry.location,   
 
        27                title:'位置', 
 
        28                icon:img 
 
        29          
 
        30           });  
 
        31           
 
        32         }    
 
        33       });   
 
        34     }   
 
        35     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   
 
        36   }  
 
        37       
 
        38    
 
        39      
 
        40   </script>   
 
        41  
 
        42 <body onload="initialize()"> 
 
        43  <div id="add"  style=" height:26px;color:#F00;font-size: 18pt;"></div>
 
        44   
 
        45  <div id="map_canvas" style="width: 380px; height: 280px;"></div>