当前位置:   article > 正文

Java --- Web 百度在线地图开发_java地图在线

java地图在线

1 准备工作

申请 ak (百度地图API 密钥);

2  查看百度地图坐标工具(坐标拾取器)

http://api.map.baidu.com/lbsapi/getpoint/index.html

3  参照一下步骤开发在线百度地图

原文连接:https://www.cnblogs.com/zxn-9588/p/8483896.html  这篇文章写得很好很详细,具体内如如下:

这几天项目中遇到了在地图中同时创建多个标注的问题,因为本人一直没有搞过地图方面的效果,所以一时惊慌,想到了原先项目中PC端有地图的效果,于是扒代码,一看,使用的是百度地图,所以马不停蹄的转向了真正的战场。依据百度地图开发文档中的API展示效果,有了自己的第一个地图Demo,效果如下(以下所有效果都是模拟在移动端界面打开):

可以看到,天安门所在地是整个地图的中心(坐标点为天安门),代码如下:

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");//创建地图
  3. var point = new BMap.Point(116.404,39.915);//创建地图坐标点,一般首次创建的这个点为地图的中心坐标点
  4. map.centerAndZoom(point,15);//初始化地图,设置中心坐标点和地图级数
  5. </script>

但是,地图的展示是需要提前做好准备工作的:

1、首先你要拥有自己的ak,这个ak就相当于你使用百度地图API的通行证,没有他你是是用不了的,当然用别人的也是可以的,但是你所在的网址要在别人的白名单内;

2、需要在<head>标签内引入以下几行代码:

复制代码

  1. <head>
  2. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
  5. </head>
  6. <body>
  7. <div id="container"></div>
  8. </body>

复制代码

  1. 如果是移动端开发的话,你是需要引入前两个<meta/>标签的,但如果是PC端开发的话,只引入<meta charset="utf-8" />就好,<body>中的<div>标签是地图显示的容器,在创建地图的时候用到,所有的地图效果都是在准备工作做好的前提下完成的,
  2. 以第一个效果为例,但是现在的中心坐标点是不明确的,可以给他加上一个东西,是他变得一眼就能看到,于是就有了“标注”之说,添加标注后的效果如下:
  3. 现在天安门上有一个红色的点,是不是变得明显了许多,代码如下:

 

复制代码

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");//创建地图
  3. var point = new BMap.Point(116.404,39.915);//创建地图坐标点,一般首次创建的这个点为地图的中心坐标点
  4. map.centerAndZoom(point,15);//初始化地图,设置中心坐标点和地图级数
  5. var marker = new BMap.Marker(point);//创建标注
  6. map.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
  7. </script>

复制代码

该效果只比第一个效果多了两行代码,一个是创建标注,一个是添加标注,其中用到了一个方法,就是addOverlay(),该方法的作用就是把标注添加到地图中,具体标注添加到哪,要看添加的是那个点,注意该点是你已经创建的点,但是这样的效果已经不能

满足我们了,因为我们不能与之进行一些简单的交互,但是别担心,一切尽在书中,百度地图的开发文档已经给你全部封装好了,添加控件后的效果如下(整体背景效果图):

其中,1是定位控件;2是标尺控件;3是缩略图控件;4是缩放控件;5是地图类型控件,点击1可以定位你当前所在的位置,点击5可以看不同类型的地图,点击3可以放大和缩小地图(就是地图级数),缩略图是可以隐藏和显示的,代码如下:

复制代码

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");
  3. var point = new BMap.Point(116.404,39.915);//创建点坐标,不一定是点坐标,要看设置
  4. var opts = {
  5. // anchor: BMAP_ANCHOR_TOP_LEFT,
  6. // offset: new BMap.Size(150,5)
  7. }
  8. map.centerAndZoom(point,11);//设置中心点(确定中心点坐标)
  9. map.setCurrentCity("北京");//在设置好地图中心点的前提下显示背景的整体图
  10. map.enableScrollWheelZoom(true);//在PC端可以通过滚轮放大缩小地图,移动端关闭该功能
  11. map.addControl(new BMap.NavigationControl(opts));//addControl()向地图添加控件 平移和缩放控件 PC端默认左上角 移动端默认右下角且只有缩放功能
  12. map.addControl(new BMap.ScaleControl(opts));//比例尺控件 默认左下角
  13. map.addControl(new BMap.OverviewMapControl(opts));//缩略图控件 默认右下角且呈可折叠状态(点击隐藏和显示)
  14. map.addControl(new BMap.MapTypeControl());//地图类型控件 默认右上角可切换地图/卫星/三维三种状态
  15. map.addControl(new BMap.GeolocationControl(opts));//定位控件 默认左下角
  16. </script>

复制代码

所有的控件他都是有默认显示的位置的,但是可以人为改变,左上角、右上角、右下角、左下角,而且缩放控件在PC端和移动端是显示两种不同的样式的,具体改变控件位置的方法我就不一一赘述了,可参考API文档,里面有详细说明,好,到了这里,算是

把百度地图的基本功能和效果都搞明白了,剩下的就是坐等丰收和往更高级的方面发展了,...有点偏题了,多个标注显示的效果如下:

上面的五个点就是我遍历出来的要显示的点,为了观看方便,我把地图级数控制在了9等级,代码如下:

复制代码

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");
  3. var point = new BMap.Point(120.382029,30.312903);
  4. map.centerAndZoom(point,9);
  5. var marker = new BMap.Marker(point);
  6. var mapPoints = [
  7. {x:30.312903,y:120.382029},
  8. {x:30.215855,y:120.024568},
  9. {x:30.18015,y:120.174968},
  10. {x:30.324994,y:120.164399},
  11. {x:30.24884,y:120.305074}
  12. ];
  13. var i = 0;
  14. map.addOverlay(marker);
  15. map.enableScrollWheelZoom(true);
  16. // 函数 创建多个标注
  17. function markerFun (points) {
  18. var markers = new BMap.Marker(points);
  19. map.addOverlay(markers);
  20. }
  21. for (;i<mapPoints.length;i++) {
  22. var points = new BMap.Point(mapPoints[i].y,mapPoints[i].x);//创建坐标点
  23. markerFun(points);
  24. }
  25. </script>

复制代码

好,到此为止,多个标注同一显示的效果已经做好了,但是我想要看看他们对应的点的详细信息怎么办,话不多说上干货:

复制代码

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");
  3. var point = new BMap.Point(120.382029,30.312903);
  4. map.centerAndZoom(point,9);
  5. var marker = new BMap.Marker(point);
  6. var mapPoints = [
  7. {x:30.312903,y:120.382029,title:"A",con:"我是A",branch:"老大"},
  8. {x:30.215855,y:120.024568,title:"B",con:"我是B",branch:"老二"},
  9. {x:30.18015,y:120.174968,title:"C",con:"我是C",branch:"老三"},
  10. {x:30.324994,y:120.164399,title:"D",con:"我是D",branch:"老四"},
  11. {x:30.24884,y:120.305074,title:"E",con:"我是E",branch:"老五"}
  12. ];
  13. var i = 0;
  14. map.addOverlay(marker);
  15. map.enableScrollWheelZoom(true);
  16. // 函数 创建多个标注
  17. function markerFun (points,label,infoWindows) {
  18. var markers = new BMap.Marker(points);
  19. map.addOverlay(markers);
  20. markers.setLabel(label);
  21. markers.addEventListener("click",function (event) {
  22. console.log("0001");
  23. map.openInfoWindow(infoWindows,points);//参数:窗口、点 根据点击的点出现对应的窗口
  24. });
  25. }
  26. for (;i<mapPoints.length;i++) {
  27. var points = new BMap.Point(mapPoints[i].y,mapPoints[i].x);//创建坐标点
  28. var opts = {
  29. width:250,
  30. height: 100,
  31. title:mapPoints[i].title
  32. };
  33. var label = new BMap.Label(mapPoints[i].branch,{
  34. offset:new BMap.Size(25,5)
  35. });
  36. var infoWindows = new BMap.InfoWindow(mapPoints[i].con,opts);
  37. markerFun(points,label,infoWindows);
  38. }
  39. </script>

复制代码

其中new BMap.Label()方法就是创建我们看到的“老大、老二、...”文本标注,就是在红点旁边显示文本框,new BMap.InfoWindow()方法就是我们考到的“我是A”的文本框,又叫“信息窗口”,opts为控制信息窗口显示的大小和title,好了,至此要实现的效果

已经实现,本篇End,期待下次再聚...

转载请注明出处!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/834914
推荐阅读
相关标签
  

闽ICP备14008679号