使用JS生成百度MAP

来源：互联网发布：aptget升级软件编辑：程序博客网时间：2024/05/22 03:16

“别人笑我太疯癫,我笑他人看不穿.”

现在的好多程序都应用到了地图的功能,我之前在项目中也做过地图的实现.在这里我使用的是百度地图用JS生成的地图.

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>地图展示</title></head><body>    <div id="allmap"></div></body></html><script type="text/javascript">var markersArray = [];  //地图标注点var mapLevel = 10;  //地图精度显示级别,值越大显示的范围越小,越详细// 百度地图API功能    var map = new BMap.Map("allmap");  // 创建Map实例    map.centerAndZoom("北京",mapLevel);      // 初始化地图,用城市名设置地图中心点    map.addEventListener("click", showInfo);  //点击监听事件,实行showInfo()方法    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放    function showInfo(e) {        alert(e.point.lng); //经度        aler(e.point.lat);  //纬度        addMarker(e.point);  //添加标注    }         //清除标识,每次在添加新标注钱都会清除之前的标注,也就是在地图上只能添加一个标注    function clearOverlays() {          if (markersArray) {              for (i in markersArray) {                  map.removeOverlay(markersArray[i]);            }          }      }          //地图上标注      function addMarker(point) {          var marker = new BMap.Marker(point);          marker.enableDragging();    //开启标注移动        markersArray.push(marker);          clearOverlays();          //标注移动事件        marker.addEventListener("dragend", function(e){            alert(e.point.lng); //经度            alert(e.point.lat); //纬度        });        map.addOverlay(marker);      }  }</script>

对,,就是这么简单,现在我们来看看效果..
这里写图片描述

阅读全文

1 0