百度地图输入地址显示位置

最新推荐文章于 2022-02-11 17:44:01 发布

qaakd

最新推荐文章于 2022-02-11 17:44:01 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏：百度地图 HTML5 js 文章标签： css jquery javascript

本文链接：https://blog.youkuaiyun.com/qaakd/article/details/107002385

js 同时被 3 个专栏收录

83 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

百度地图

2 篇文章

订阅专栏

本文介绍了一个使用百度地图API的示例代码，通过输入地址查询并显示其经纬度坐标，同时在地图上标注位置。代码实现了地址查询、地图展示、坐标获取和标注等功能。

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

效果图：

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body style="background:#CBE1FF">
<div style="width:730px;margin:auto;">
要查询的地址：<input id="text_" type="text" value="宁波天一广场" style="margin-right:100px;"/>
查询结果(经纬度)：<input id="result_" type="text" />
<input type="button" value="查询" onclick="searchByStationName();"/>
<div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50px;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom("宁波", 12);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开