百度地图javascript api之入门demo

最新推荐文章于 2021-04-28 16:59:42 发布

0X码上链

最新推荐文章于 2021-04-28 16:59:42 发布

阅读量2.1k

点赞数 1

分类专栏：百度地图api 文章标签：百度地图api

本文链接：https://blog.csdn.net/wzygis/article/details/23692103

版权

百度地图api 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本来想做百度地图api for flex，才发现百度对这项技术已经处于停用状态，而主要专注于javascript api上。好吧，顺应百度的趋势，做js。

百度地图的开发比较于google，要简单一些，在百度官网上，资料应有尽有，充分说明了百度更懂中国人的特点。

下面是baidu地图的入门示例代码：包含初始化加载、事件等，算得上是一个入门的demo了。

<!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标签，以便使您的页面更好的在移动平台上展示 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>百度地图</title>
<script type="text/javascript">  
function initialize() {  
  var mp = new BMap.Map('map');  
  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
  //使用鼠标滚轮控制缩放
  mp.enableScrollWheelZoom();
  mp.addEventListener("click",showInfo);
  function showInfo(e){
	  alert("经度："+e.point.lng+",纬度"+e.point.lat);
  }
}  
   
function loadScript() {  
  var script = document.createElement("script");  
 	script.src = "http://api.map.baidu.com/api?v=1.5&ak=keyNo&callback=initialize";
  //此为v1.5版本的引用方式  
  // http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式  
 document.body.appendChild(script);  
}  
window.onload = loadScript;  
</script>  
</head>
<body>
<h2>百度map</h2>
<center>
<div id="map" style="width:700px;height:700px"></div>
</center>
</body>
</html>