新文档

来源：互联网发布：ipad读书软件推荐编辑：程序博客网时间：2024/06/05 03:42

关于地理位置的总结

要求：

1.在页面上展示地图，并且在输入框中输入数据库中的IP地址，在页面的地图上就是显示标记.

2.地图的引用可以调用谷歌自带的，也可以使用echarts官网上提供的world.js文件

3.语言是结合html,js,jquery,和php，其中php是为了读取出服务器数据库里的数据

效果展示（定位不是太准确，粗糙）

准备工作

找到百度地图的开放平台的普通ｉｐ定位部分
http://lbsyun.baidu.com/index.php?title=webapi/ip-api
根据官网给出的文档，最主要的是构造ｕｒｌ和对于返回之后的数据的经纬度的获取
经过测试之后，一开始没有注意到跨域的问题，使用的是＄．ａｊａｘ，程序出现错误，，解决办法请看http://www.cnblogs.com/brucemengbm/p/7363746.html

代码

ｈｔｍｌ部分没列出，给出的是关键的ｊｓ部分

`<script type="text/javascript">    <?php        require_once("mysql.php");        $mysqlcon=new MySqlCon;        $mysqlcon->myconnect();        mysql_query("SET NAMES 'utf8'");        $mysqlcon->myopen();        $db_select=mysql_select_db("Celery_Data");        if(!$db_select)        echo ("open failed");    ?>    var storeResult=new Array();    $(".search-map").on("click",function(){        var value_map=$("#input-map").val();        //alert(typeof(value_map));        //在这里使用ajax传递到后台    $.ajax({        type:"POST",//提交方式        url:"view.php",        data:{name:value_map},//发送到服务器的数据    });    //在服务器接收数据，并做处理    <?php        $value_map=$_POST['name'];        //print_r($value_map);        $sql_map="select "    ?>          ak='au4bhMjPweW1P2giTO8ztBi1GDiqxFz7';        //构造url        url='https://api.map.baidu.com/location/ip'+'?ak='+ak+'&ip='+value_map+"&coor=bd09ll";        $.getJSON(url+"&callback=?",function(data){        //处理data数据        if(data.status==0)                {                    storeResult.push(                        {                               value:[data.content.point.x,data.content.point.y]                        });                    myChartmap=echarts.init(document.getElementById('mychart-map'));                    var optionworld_map={                     //图形提示框组件                    tooltip:{                        show:true,                        trigger:'item',                        enterable:true,//鼠标可以进入提示框                    },                    //图例                legend: {                    data:['IP']                },                geo:{                    //type:'map',                    show:true,                    map:'world',                    roam:true,                    left:'10%',                    itemStyle:{                        normal:{                        //areaColor:'#404a59',                            color:'#404a59',                            borderColor:'#696969'//图形的边框的颜色                        },                    emphasis:{                        //areaColor:'#A9A9A9',                        color:'#A9A9A9',                        opacity:0.5                        }                    }                },                series:[                {                    type:'effectScatter',                    coordinateSystem:'geo',                    effectTpe:'ripple',//设置的是波纹的涟漪                    showEffectOn:'render',                    rippleEffect:{                        brushType:'stroke'                    },                    symbolSize:40,                    data:storeResult,                    itemStyle: {                        normal: {                            color:'#f4e925',                            shadowBlur:10,                            shadowColor:'#333'                        }                    },                }]            };            myChartmap.setOption(optionworld_map);            console.log(storeResult);                    }            else                 {alert("请求失败！！")}                })            });</script>

阅读全文

1 0