百度地图api练习

时间：2015-09-18 19:01:29 收藏：0 阅读：422

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>

效果图展示：

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>

效果图展示：

服务器端，采用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

原文：http://my.oschina.net/zhailibao2010/blog/508187