百度地图调用示例

最新推荐文章于 2022-05-01 18:15:57 发布

原创最新推荐文章于 2022-05-01 18:15:57 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图

BaiduAPI 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何通过百度地图API实现地图展示、位置查询及定位功能，包括引入相关库、参数传递、AJAX请求与回调函数应用，以及具体代码实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一

首先要申请百度地图的ak ，不解释，自行百度。

二

1、需引用Jquery.js文件
2、采用跨域查请求的方式
3、采用url传递参数的方式显示，可以用于iframe方式展示地图
注：url参数需用escape()方法编译一下（针对中文）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地图</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={{你申请的ak}}"></script>
<style type="text/css">
        body, html {overflow: hidden;margin:0;font-family:"微软雅黑";}
        .anchorBL{display:none} /* 去掉百度地图logo */
</style>
</head>
<script language="javascript"> 
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串 
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
</script> 
<body>
<div style="width:600px;height:480px;overflow: hidden;" id="allmap"></div>
</body>
<script type="text/javascript">
var name = undefined;
 $(function () {
     var Request = new Object(); 
     Request = GetRequest(); 
     var address = Request['address'];
     name = Request['name'];
     var url = "http://api.map.baidu.com/geocoder/v2/?address=" + address + "&output=json&ak={{你申请的ak}}";
     $.ajax({
            type: 'get',
            url: url,
            dataType: 'jsonp',
            jsonp: "callback",//服务端用于接收callback调用的function名的参数 
            jsonpCallback:"showLocation",//callback的function名称 
            success: function(data) {
            },
            error: function() {
                alert("网络查询出错！");
            }
    });

 });

 window.showLocation = function(data){
        if(data.status != 0){
            alert("无法准确查到该地址！");
            return;
        }
        // 百度地图API功能
        /*创建Map实例
        1-构造底图时，关闭底图可点功能
        2-设置地图允许的最小/大级别
        */
        var map = new BMap.Map("allmap", {enableMapClick:false, minZoom:5, maxZoom:14});
        // 中心点 (纬度， 经度)
        var point = new BMap.Point(data.result.location.lng, data.result.location.lat); 
        // 默认显示级别
        map.centerAndZoom(point, 13);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        // 标注
        var label = new BMap.Label(name ,{offset:new BMap.Size(20,-5)});
        marker.setLabel(label);
 }

</script> 
</html>