百度地图调用

最新推荐文章于 2023-06-15 14:36:39 发布

原创最新推荐文章于 2023-06-15 14:36:39 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

前端页面类专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个使用百度地图API的示例代码，展示了如何将地图集成到网页中，并根据URL参数搜索特定地点。

点击页面地址地图图标，跳转进入地图页面

在调用百度地图API的时候，首先要引入

完整案例代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>地图位置</title>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GzH3uSI767WQc7Y1NF2Chn2eTEFTcjOn"></script>
<style type="text/css">
body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#l-map{height:300px;width:100%;}
#r-result{width:100%;}
</style>
<body>
<div id="l-map"></div>
<div id="r-result"></div>
<div id="panel"></div>
</body>
<script type="text/javascript">
//获取url中参数
function GetQueryString(name)
{ var href = decodeURI(window.location.search)
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = href.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}

// 调用方法
var bankName = GetQueryString("bankName");

var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("徐州"+bankName);
</script>
</html>

注：

1）百度地图调用报错Uncaught TypeError:Cannot read property 'fc' of undefined。

百度地图要在页面加载完成后吊调用，一定要在所有页面加载完成后调用。

2）在<body>中放<div>用来显示地图。

---------------------------------------------------------------------分割线------------------------------------------------------------------暂时就这些，随后有问题再进行补充。