调用百度地图插件-更新

2017-05-15 | 阅读：次

调用百度地图插件,常用技术

创建地图： var map = new BMap.Map("divid");

创建坐标点：var point = new BMap.Point("经度","纬度");

设置视图中心点：map.centerAndZoom(point,size);

激活滚轮调整大小功能：map.enableScrollWheelZoom();

添加控件：map.addControl(new BMap.Xxx());

添加覆盖物：map.addOverlay();

控件介绍

NavigationControl：缩放地图的控件，默认在左上角；

OverviewMapControl：地图的缩略图的控件，默认在右下方；

ScaleControl：地图显示比例的控件，默认在左下方；

MapTypeControl：地图类型控件，默认在右上方；

代码示例：

```
<html>
	<head>
		<!--引用百度地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
		</script>
		<title>
			控件使用
		</title>
				<!--
		设计样式
			container容器：占50%大小
		-->
		<style type="text/css">
		#container{
			width:50%;
			height:50%;
		}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
			var point = new BMap.Point(500,500);//定位
			map.centerAndZoom(point,15);				//将point移到浏览器中心，并且地图大小调整为15;
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.MapTypeControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
		</script>
	</body>
</html>
```

标注：Marker

 百度地图API学习总结

(1)在point处添加标注：var marker = new BMap.Marker(point);

(2)添加覆盖物：map.addOverlay(marker);

(3)激活标注的拖拽功能：marker.enableDragging();

(4)为标注添加事件：marker.addEventListener("名称",function(){

    //点击标注后的事件

});

(5)删除覆盖物：map.removeOverlay(marker);

(6)销毁标注：marker.dispose();

信息窗口：InfoWindow

(1)在某个特定的位置创建一个信息窗口：var infowindow = new BMap.InfoWindow(“内容”,{width:250,height:100,title:”hello”});

(2)在地图中央打开信息窗口：map.openInfoWindow(infoWindow,map.getCenter());

完整代码

  <!DOCTYPE html>
  <html>

  <head>
      <meta charset="UTF-8">
      <title></title>
      <!--地图 -->
          <script src="https://api.map.baidu.com/api?v=2.0&ak=GW0UPwBKw1aCl983mr4WFLCcBn8u18Az&s=1" type="text/javascript" charset="utf-8"></script>
       <!--地图 -->
      <style type="text/css">
          * {
              margin: 0;
              padding: 0;
          }

          html,
          body {
              width: 100%;
              height: 100%;
              position: relative;
          }

          h3 {
              display: block;
              width: 100%;
              height: 60px;
              line-height: 60px;
              text-align: center;
              background: aquamarine;
              color: #fff;
              font-size: 40px;
          }

      </style>
  </head>

  <body>
  <h3>我的地图</h3>
  <div id="baiduMap" style="width:100%;margin-top: 51px;"></div>
  <script>
      var map = new BMap.Map("baiduMap");
      map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
      map.addControl(new BMap.NavigationControl());   //添加左上地图缩放控件
  //        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      var point = new BMap.Point(113.305679,23.104074);//定位
      map.centerAndZoom(point,15);//将point移到浏览器中心，并且地图大小调整为15;
      var marker = new BMap.Marker(point);// 创建标注
      map.addOverlay(marker);// 将标注添加到地图中

      var opts = {
          width : 200,     // 信息窗口宽度
          height: 50,     // 信息窗口高度
          title : "Hello"  // 信息窗口标题
      }
      var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
      marker.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      marker.addEventListener("click",function(){
          //点击标注后的事件
          marker.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      });

  </script>
  </body>

  </html>

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！