正文  软件开发 > PHP编程技术 >

PHP版:地图对接汇总(百度地图),php对接

PHP版:地图对接汇总(百度地图),php对接最近再做一个项目需要用户地图定位功能,因此研究了一下百度地图的功能。 多了不说上代码: php版 [php] view plain copy ...

PHP版:地图对接汇总(百度地图),php对接

最近再做一个项目需要用户地图定位功能,因此研究了一下百度地图的功能。

多了不说上代码:

php版

[php] view plain copy print?
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <title>百度地图搜索</title>
  6. <script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>
  7. <script type="text/javascript"
  8. src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script>
  9. </head>
  10. <body>
  11. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
  12. 要查询的地址:<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/>
  13. 查询结果(经纬度):<input id="result_" type="text" />
  14. <input type="button" value="地址查询经纬度" onclick="searchByStationName();"/>
  15. <div id="r-result">
  16. 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
  17. <input type="button" value="查询" onclick="theLocation()" />
  18. </div>
  19. <div id="results" style="font-size:13px;margin-top:10px;"></div>
  20. </body>
  21. </html>
  22. <script type="text/javascript">
  23. var map = new BMap.Map("container");
  24. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  25. map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
  26. map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
  27. //为了使用地图更加方便,我们还可以添加上缩放的平移控件,以及地图的缩略图控件,并设置他要显示的位置:
  28. map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
  29. map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
  30. map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
  31. //var local = new BMap.LocalSearch(map, {
  32. // renderOptions: {map: map, panel: "results"}
  33. //});
  34. //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()};
  35. ////var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
  36. //map.addControl(new BMap.NavigationControl(opts));
  37. //local.search("北京市海淀区上地地铁站");
  38. //1.构建搜索
  39. var localSearch = new BMap.LocalSearch(map);
  40. localSearch.enableAutoViewport(); //允许自动调节窗体大小
  41. //2.开始做最关键的一步了,就是获取地址的具体经纬度:
  42. var searchByStationName = function(){
  43. var keyword = document.getElementById("text_").value;
  44. //搜索回调方法
  45.   localSearch.setSearchCompleteCallback(function (searchResult) {
  46. alert(searchResult);
  47.     var poi = searchResult.getPoi(0);
  48.     document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度,将结果显示在文本框中
  49.     map.centerAndZoom(poi.point, 13);
  50.   });
  51.   localSearch.search(keyword);
  52. }
  53. /**********************************
  54. ***********百度地图API功能*********
  55. **********************************/
  56. //1.城市名定位
  57. //var map = new BMap.Map("allmap");
  58. //var point = new BMap.Point(116.331398,39.897445);
  59. //map.centerAndZoom(point,11);
  60. function theLocation(){
  61. var city = document.getElementById("cityName").value;
  62. if(city != ""){
  63. map.centerAndZoom(city,11); // 用城市名设置地图中心点
  64. }
  65. }
  66. //2.IP定位获取当前城市
  67. function myFun(result){
  68. var cityName = result.name;
  69. map.setCenter(cityName);
  70. alert("当前定位城市:"+cityName);
  71. }
  72. var myCity = new BMap.LocalCity();
  73. myCity.get(myFun);
  74. //3.单击获取点击的经纬度
  75. //单击获取点击的经纬度
  76. var longitude = "";//经度
  77. var latitude = "";//纬度
  78. map.addEventListener("click",function(e){
  79. alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat);
  80. longitude = e.point.lng;
  81. latitude = e.point.lat;
  82. if(longitude != "" && latitude != ""){
  83. map.clearOverlays();
  84. var new_point = new BMap.Point(longitude,latitude);
  85. var marker = new BMap.Marker(new_point); // 创建标注
  86. map.addOverlay(marker); // 将标注添加到地图中
  87. map.panTo(new_point);
  88. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  89. }
  90. });
  91. //4 用经纬度设置地图中心点
  92. /*function theLocation(){
  93. if(longitude != "" && latitude != ""){
  94. map.clearOverlays();
  95. var new_point = new BMap.Point(longitude,latitude);
  96. var marker = new BMap.Marker(new_point); // 创建标注
  97. map.addOverlay(marker); // 将标注添加到地图中
  98. map.panTo(new_point);
  99. }
  100. }*/
  101. //5.逆地址解析,点击地图展示详细地址
  102. var geoc = new BMap.Geocoder();
  103. map.addEventListener("click", function(e){
  104. var pt = e.point;
  105. geoc.getLocation(pt, function(rs){
  106. var addComp = rs.addressComponents;
  107. alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
  108. });
  109. });
  110. </script>
  111. </span>

附上baidu地图APIdemo地址:http://developer.baidu.com/map/jsdemo.htm

源码下载地址:http://www.jinhusns.com/Products/Download

http://www.bkjia.com/PHPjc/1232191.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1232191.htmlTechArticlePHP版:地图对接汇总(百度地图),php对接 最近再做一个项目需要用户地图定位功能,因此研究了一下百度地图的功能。 多了不说上代码:...