百度地图API使用-初涉

飞奔的炮台

百度地图API使用-初涉

注册百度开发者平台
注册百度开发者平台账号
- 1 打开百度，然后按下图操作：
- 2 点击“申请密钥”后，会让你输入你的真实姓名等基本信息，如实输入后，会出现下面界面，创建一个AK：
- 点击确定，AK列表
- 进入开发者模式
- 百度开放的N多开发者案例
你也可以这样
我的成功案例

注册百度开发者平台
这几天接到个需求，就是给app端签到后的数据，在查看的时候进行位置的重定位。我一听，好高大上的感脚啊，我就研究了下，嗨，竟然研究了一上午，发现了不少新鲜东西，特记录一下下，给大家捋一下思路。

注册百度开发者平台账号
1 打开百度，然后按下图操作：

2 点击“申请密钥”后，会让你输入你的真实姓名等基本信息，如实输入后，会出现下面界面，创建一个AK：

注意：
1）应用名称：这个名称就是用来给你自己记录一下，申请的这个AK的值，是用于哪个项目的，方便你自己记录和辨别，因为你可以申请很多个AK值。当你申请了多个后，会有一个AK的列表。
2）应用类型：这里因为我是网站类型的，所以这里必须选择“浏览器端”。当你不选择浏览器端的时候，系统会给你一些提示的，建议一定要多看看。
3） Referer白名单：这里是以后部署完项目后，那些访问地址可以访问你这个AK值，只有在这个白名单里面的IP地址值才可以访问，其他的都会返回错误信息。这里因为我是测试，所以我写了192.168.1.111，因为这是我个人电脑IP地址。当部署到正式地址后，需要类似于后缀名似的模糊地址，下图：

点击确定，AK列表

进入开发者模式
这时候，把鼠标移到当前页面最上方的“开发文档”页签上：

然后，选择 “JavaScript API”

然后，点击 “DEMO详情”

百度开放的N多开发者案例
就会看到下面这界面，全是案例：

你也可以这样
访问：http://lbsyun.baidu.com/">http://lbsyun.baidu.com/
然后，往下拖动，看到下面这里：

这几个都是很有用的功能，可以直接拿到简单的百度地图的api代码，教你如何使用。

我的成功案例
这里，我给你一个我个人实现的成功案例。（给定几个地址后，我会在页面生成地图，并标记出地图的位置来）：
Jsp代码：

<%@ page language="java" isELIgnored="false"
  contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:"微软雅黑";}
  #mapdiv{width:100%;height:500px;}
  p{margin-left:5px; font-size:14px;}
  /*隐藏百度地图的版权信息*/
  .anchorBL{ 
  display:none; 
  } 
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>百度地图ApiDemo</title>
</style>
</head>
<body>
  <div id="mapdiv" style="width: 50%; float: right;">
  <!-- 【这里是展示百度地图的body】 -->
  </div>
</body>
</html>
<script type="text/javascript">
  //百度地图API功能
  // 创建Map实例
  map = new BMap.Map("mapdiv");
  // 初始化地图,设置中心点坐标和地图级别
  map.centerAndZoom(new BMap.Point(116.21645635689414, 40.2217235498323), 17);
  // 添加带有定位的导航控件
  var navigationControl = new BMap.NavigationControl({
  // 靠左上角位置
  anchor : BMAP_ANCHOR_TOP_LEFT,
  // LARGE类型
  type : BMAP_NAVIGATION_CONTROL_LARGE,
  // 启用显示定位
  enableGeolocation : true
  });
  map.addControl(navigationControl);
  // 设置地图显示的城市 此项是必须设置的
  map.setCurrentCity("北京");
  /** 开启鼠标滚轮缩放 2019-4-8 11:16:04*/
  map.enableScrollWheelZoom(true);
  var data_info = [
  //[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
  //[116.406605,39.921585,"地址：北京市东城区东华门大街"],
  //[116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
  ];
  /*
   1.通过Ajax方式从后台获取地址信息
   2.通过接口Api，将地址信息转化为图标
   3.在前台通过坐标进行定位
   4.将地址信息转化为坐标实例
   访问URL:http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&address=北京市
  */
  $(function() {
  var url1 = "<%=request.getContextPath()%>/api/getAddress";
  $.ajax(url1, {
    async : false,
    success : function(data) {
    $.each(data, function(i, v) {
      var url = "http://api.map.baidu.com/geocoder/v2/";
      $.ajax(url, {
      data : {
        'address'   : v.address,
        'output'  : 'json',
        'ak'  : '你的AK值'
      },
      async : false,
      dataType : 'jsonp',
      crossDomain : true,
      success : function(data) {
        data_info.push([ data.result.location.lng, data.result.location.lat, v.name + "：" + v.address ]);
        for (var i = 0; i < data_info.length; i++) {
        map.centerAndZoom(new BMap.Point(data_info[i][0], data_info[i][1]), 18);
        // 创建标注
        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);
        //跳动的动画
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
        }
      }
      });
    });
    }
  });
  });
  var opts = {
  width : 250, // 信息窗口宽度
  height : 80, // 信息窗口高度
  title : "位置信息",  // 信息窗口标题
  enableMessage : true //设置允许信息窗发送短息
  };
  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>

jsp中关键的一点是，已入百度的api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>

然后就是地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素，名字随便取了一个：mapdiv

后台对应的java代码：

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
 * @方法描述   百度地图接口使用规则
 * @初次开发   平传胜
 * @开发日期 2019年4月8日下午12:52:17
 */
@Controller
@RequestMapping("/api")
public class ApiController {
  /**
   * 百度地图接口（访问应用AK：你的AK值）
   * http://api.map.baidu.com/geocoder/v2/?address=北京市海淀区上地十街10号&output=json&ak=你的AK值&callback=showLocation
   */
  @RequestMapping("/apishow")
  public String apiShow(HttpServletRequest request, HttpServletResponse response) throws Exception {
  System.out.println("进入百度地图api的测试案例页面");
  return "baiduApi/baiduapi";
  }
  /**
   * @方法描述   获取指定数据的定位信息
   * @初次开发   平传胜
   * @开发日期 2019年4月8日下午3:42:54
   */
  @RequestMapping("/getAddress")
  @ResponseBody
  public List<Map<String,String>> getAddress() throws Exception {
  List<Map<String,String>> list=new ArrayList<Map<String,String>>();
  Map<String,String> map3=new HashMap<String,String>();
  map3.put("name","平传胜");
  map3.put("address","北京市海淀区知春路29号院-8号楼");
  list.add(map3);
  return list;
  }
}

结果如下图：

图中的红点是会跳动的哦~
写的匆忙，日后修改。
好了，先写到这里。
2019-04-08 22:31:49

[办公软件] 百度地图API使用-初涉

相关帖子

打开或关闭windows功能无法使用解决方法

百度知道怎么提问题

怎么在百度提问让别人回答问题

电脑加内存条直接加上可以使用吗

百度图片显示不出来解决方法

无法使用此iphone解决方法

教你使用HTML/CSS和Three.js的喷火龙小游戏

php使用GD库创建图片缩略图的方法

使用原生querySelectorAll和forEach来实现点击切换

笔记本要一直充电好还是不充电好？

飞奔的炮台 LV3