百度地图API应用
博客专区 > ainina 的博客 > 博客详情
百度地图API应用
ainina 发表于2年前
百度地图API应用
  • 发表于 2年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 百度地图API
< 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:"Microsoft Yahei";}
     </ style >
     < script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=3bb801b79151585f9534ed9ed7ff280d" ></ script >
     < title >BaiduMap</ title >
</ head >
< body >
< div id = "showbd"
     style="position: absolute;
             margin-top:1px;
             width: 800px;
             height: 600px;
             top: 10;
             border: 1px solid gray;
             overflow:hidden;">
</ div >
</ body >
</ html >
< script type = "text/javascript" >
     // 百度地图API功能
     var map = new BMap.Map("showbd");
     map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
     map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
     map.addControl(new BMap.NavigationControl());  //初始化地图控件             
     map.addControl(new BMap.ScaleControl());                  
     map.addControl(new BMap.OverviewMapControl());             
     var point=new BMap.Point(114.294672,30.555526);
     map.centerAndZoom(point, 11);//初始化地图中心点
     var marker = new BMap.Marker(point); //初始化地图标记
     
     var json_data = [[114.401,30.915],[114.402,30.915],[114.403,30.915]];
     var pointArray = new Array();
     for(var i=0;i< json_data.length ;i++){
         var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
         map.addOverlay(marker);    //增加点
         var label = new BMap.Label("标注"+i,{offset:new BMap.Size(20,-10)});
         label.setStyle({ 
          display:"none",
     });
         marker.setLabel(label);
         pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
         marker.addEventListener("click",attribute);
         
         marker.addEventListener("mouseover", function(e){ 
                 var p = e .target.getLabel();
                 p.setStyle({ display:"block"});                 
         });
         marker.addEventListener("mouseout", function(e){
             var p = e .target.getLabel();
                 p.setStyle({display:"none"});
         });        
     }
     //让所有点在视野范围内
     map.setViewport(pointArray);
     //获取覆盖物位置
     function attribute(e){
         var p = e .target;
         alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
     }  
</script>


共有 人打赏支持
粉丝 0
博文 1
码字总数 299
×
ainina
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: