百度地图实例

最新推荐文章于 2025-04-16 10:17:26 发布

转载最新推荐文章于 2025-04-16 10:17:26 发布 · 980 阅读

收录于

百度地图Api-天气预报

当前文章被收录于：

百度地图Api-天气预报

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个使用百度地图API创建地图的基本示例。通过简单的HTML和JavaScript代码，展示了如何加载百度地图并设置中心点为华山的位置。同时，还实现了地图拖拽、滚轮缩放等功能，并添加了导航和比例尺等常用控件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图</title>
</head>
<body>
<div  style=" width:500px; height:500px;" id="baiduMapDiv"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
    var map = new BMap.Map("baiduMapDiv");
	var myGeo = new BMap.Geocoder();
	myGeo.getPoint("华山", function(point){
	  if (point) {
		map.centerAndZoom(point, 17);
		map.addOverlay(new BMap.Marker(point));
		addMapControl();
	  }
	}, "渭南市");

    function addMapControl(){
		map.enableDragging();
		map.enableScrollWheelZoom();
		map.enableDoubleClickZoom();
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
</script>
</html>