官方文档参考
效果图
代码
<?php
header("Content-type:text/html;charset=utf-8");
error_reporting(E_ALL^E_NOTICE);
$address=$_GET['address'] ? $_GET['address'] : '山东省济南市大明湖风景区';
//坐标
$apiurl = "#34;.$address."&output=json&ak=3075ca513c180f154a83789e3f93c1c4&callback=showLocation";
$file = file_get_contents($apiurl);
$file = str_replace("showLocation&&showLocation","",$file);
$file = substr($file, 0, -1);
$file = substr($file,1);
$arrpoint = json_decode($file,true);
$x = $arrpoint['result']['location']['lng'];
$y = $arrpoint['result']['location']['lat'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>根据地理名称获取百度地图中的位置</title>
</head>
<body>
<form action="index.php">
<input type="text" name="address" value="<?php echo $address;?>" />
<input type="submit" value="提交" />
</form>
<div id="allmap" class="mt10 mapleft" style="width:100%; height:100%;"></div>
<script type="text/javascript" src="#34;></script>
<script type="text/javascript">
var x = '<?php echo $x;?>';var y = '<?php echo $y;?>';var shopInfo = "地理名称:<?php echo $address;?></span>";
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(x, y);
map.centerAndZoom(point, 15); //设置中心点 和缩放级别
//map.addControl(new BMap.NavigationControl()); //添加鱼骨
//map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
// map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }));
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(shopInfo); // 创建信息窗口对象
map.addOverlay(marker);
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
//map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
</script>
</body>
</html> 总结一下
通过学习地图api可以实现各种各样的需求，不再仅限于纯前端html的开发，感兴趣的赶紧学习起来吧。
我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。
往期文章分享：
