如何制作一个百度地图的html

2025-10-27 10:33:23

1、申请百度地图的密钥,过程如下链接

如何制作一个百度地图的html

2、然后便捷代码:

<!DOCTYPE html>  

<html>  

<head>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>地图</title>

<style type="text/css">  

html{height:100%}  

body{height:100%;margin:0px;padding:0px}  

#container{height:100%}  

</style>  

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GbLBG0iSnUi7hvBVdWxAm0qCvK46SsFu">//2.0版本

</script>

</head>  

<body>  

<div id="container"></div> 

<script type="text/javascript"> 

var map = new BMap.Map("container");          // 创建地图实例  

var point = new BMap.Point(119.3,26.08);  // 创建点坐标  

map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别 

var marker = new BMap.Marker(point);        // 创建标注    

map.addOverlay(marker);                     //将标注添加到地图中

var opts1 = {type: BMAP_NAVIGATION_CONTROL_LARGE} 

map.addControl(new BMap.NavigationControl(opts1)); 

var opts2 = {offset: new BMap.Size(150, 5)}  

map.addControl(new BMap.ScaleControl(opts2)); 

map.addControl(new BMap.OverviewMapControl());    

map.addControl(new BMap.MapTypeControl());    

map.setCurrentCity("福州");   

</script>  

</body>  

则显示如开始的图片

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢