百度地图api练习

  • web前端展示1:
  • <!DOCTYPE html>
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
                    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=shmFW60npXiuwVtfXAUNS9AR"></script>
            <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
            <title>文本标注</title>
    </head>
    <body>
            <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            $(document).ready(function(){
                $.getJSON("/cgi-bin/oalogin_read.cgi",function(result){
                      $.each(result, function(i, field){
                          if(typeof(field.address)=="undefined"){
                              return;
                          }
                          var point = new BMap.Point(field.point.x,field.point.y);
                          var opts = {
                              position : point,    // 指定文本标注所在的地理位置
                              offset   : new BMap.Size(30, -30)    //设置文本偏移量
                          }
                          addr_array=field.address.split("|");
                          address=addr_array[1]+"-"+addr_array[2];
                          var label = new BMap.Label(address, opts);  // 创建文本标注对象
                          label.setStyle({
                             color : "red",
                             fontSize : "12px",
                             height : "20px",
                             lineHeight : "20px",
                             fontFamily:"微软雅黑"
                          });
                          map.addOverlay(label); 
                          var center_point = new BMap.Point(108.95309828,34.27779990);
                          map.centerAndZoom(center_point, 5);
    
             //             alert(field.address);
                          return;
                      });
            });
            });
    </script>
    效果图展示:
  • 百度地图api练习_第1张图片
  • web前端展示2:
  • <!DOCTYPE html>
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
                    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                    #allmap{width:100%;height:500px;}
                    p{margin-left:5px; font-size:14px;}
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=shmFW60npXiuwVtfXAUNS9AR"></script>
            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
            <title>给多个点添加信息窗口</title>
    </head>
    <body>
            <div id="allmap"></div>
            <p>点击标注点,可查看由纯文本构成的简单型信息窗口</p>
    </body>
    </html>
    <script type="text/javascript">
            $(document).ready(function(){
                // 百度地图API功能  
                map = new BMap.Map("allmap");
                map.centerAndZoom(new BMap.Point(108.95309828,34.27779990), 5);
                var data_info = new Array();
            
                $.getJSON("/cgi-bin/oalogin_read.cgi",function(result){
                      $.each(result, function(i, field){
                          if(typeof(field.address)=="undefined"){
                              return;
                              
                          }
                          addr_array=field.address.split("|");
                          address=addr_array[1]+"-"+addr_array[2];
                          data_info.push([field.point.x,field.point.y,address])
                      });
                    var opts = {
                                            width : 250,     // 信息窗口宽度
                                            height: 80,     // 信息窗口高度
                                            title : "信息窗口" , // 信息窗口标题
                                            enableMessage:true//设置允许信息窗发送短息
                                       };
                    for(var i=0;i<data_info.length;i++){
                            var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                            var content = data_info[i][2];
                            map.addOverlay(marker);               // 将标注添加到地图中
                            addClickHandler(content,marker);
                    }
                    function addClickHandler(content,marker){
                            marker.addEventListener("click",function(e){
                                    openInfo(content,e)}
                            );
                    }
                    function openInfo(content,e){
                            var p = e.target;
                            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
                            map.openInfoWindow(infoWindow,point); //开启信息窗口
                    }
                });
            });
    </script>
    效果图展示:
  • 百度地图api练习_第2张图片

服务器端,采用cgi方式,数据json格式数据放到apache的cgi目录:

/var/www/html/cgin-bin/oalogin_read.cgi

httpd.conf配置文件增加选项:AddHandler cgi-script .cgi

更改权限:

chown apache.apache oalogin_read.cgi

chmod u+x oalogin.read.cgi

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import pickle
import urllib
import urllib2
import json
#
# 根据ip地址从百度地图api返回位置,地址等信息
def getInfoByIP(ip):
    ak="shmFW60npXiuwVtfXAUNS9AR"
    url="http://api.map.baidu.com/location/ip?ak="+ak+"&ip="+ip+"&coor=bd09ll"
    #为urllib2 设置代理
    proxy=urllib2.ProxyHandler({'http': 'http://10.10.61.4:3128'})
    opener= urllib2.build_opener(proxy)
    urllib2.install_opener(opener)

    req = urllib2.Request(url)
    res_data = urllib2.urlopen(req)
    res = res_data.read()
    json_data = json.loads(res)
    item={}
    if json_data.has_key('address') and json_data.has_key('content'):
       # print json_data['address'].encode('utf-8').decode('utf-8'),json_data['content']['point']
        item['address']=json_data['address']
        item['point']=json_data['content']['point']
    return item
输出json格式数据
def jsonResponse(result_json):
    import cgi
    import cgitb
    cgitb.enable()
    print "Content-type:application/json"
    print
    #cgi.print_environ()
    print result_json

if __name__ == "__main__":
    #从login.pk 文件中读取ip地址信息
    login_db = open('/var/www/cgi-bin/login.pk','r')
    login_data = pickle.load(login_db)
    login_ips={}
    for item in login_data:
       # print item[0].decode('utf8'),item[1:]
        ip = item[-1].strip()
        if login_ips.has_key(ip):
            login_ips[ip]+=1
        else:
            login_ips[ip]=1
    #print login_ips

    #循环获取ip地址的详细信息
    map_data_json=[]
    for ip in login_ips.keys():
        ip_data = getInfoByIP(ip)
        map_data_json.append(ip_data)
    encodejson=json.dumps(map_data_json)
    jsonResponse(encodejson)



  • 参考文档:
    http://developer.baidu.com/map/jsdemo.htm#d0_5
    http://developer.baidu.com/map/jsdemo.htm#d0_1

你可能感兴趣的:(百度地图api)