百度地图API使用例子

来源：互联网发布：php print 换行编辑：程序博客网时间：2024/04/28 03:53

例子：支持拖拽，缩放，比例尺显示，地图/卫星图切换

代码如下：

<pre name="code" class="html"><!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 基本表单</title>   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><!--<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>--><script type="text/javascript">  function initialize() {    var mp = new BMap.Map('map');    var point = new BMap.Point(116.314878,40.016318);   mp.centerAndZoom(point, 14);  var marker = new BMap.Marker(point);        // 创建标注    mp.addOverlay(marker);                     // 将标注添加到地图中var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}mp.addControl(new BMap.NavigationControl(opts)); mp.addControl(new BMap.ScaleControl()); mp.addControl(new BMap.GeolocationControl()); mp.addControl(new BMap.MapTypeControl());    mp.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用}     function loadScript() {    var script = document.createElement("script");    script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  document.body.appendChild(script);  }     window.onload = loadScript;  </script> </head><body><div id="map" style="width:500px;height:550px"></div></body></html>

效果图：

0 0