百度地图API使用-初涉
原创地址：https://blog.csdn.net/QQ826688096/article/details/89113966
注册百度开发者平台
这几天接到个需求，就是给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/
然后，往下拖动，看到下面这里：
这几个都是很有用的功能，可以直接拿到简单的百度地图的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