百度地图API使用例子

最新推荐文章于 2021-07-27 18:33:57 发布

xuanwuziyou

最新推荐文章于 2021-07-27 18:33:57 发布

阅读量732

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/46617805

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

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

代码如下：

<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>

效果图：

xuanwuziyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图API使用例子

例子：支持拖拽，缩放，比例尺显示，地图/卫星图切换代码如下： Bootstrap 实例 - 基本表单 --> function initialize() { var mp = new BMap.Map('map'); var point = new BMap.Point(116.314878,40.016318); mp.c
复制链接

扫一扫

专栏目录