百度地图API描点
来源:互联网 发布:centos 5.5 下载地址 编辑:程序博客网 时间:2024/05/16 07:53
<!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:"微软雅黑";} #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} #r-result{height:100%;width:20%;float:left;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dHV1z8mmWy1qvO4IjAlzvdH1uxsjDVZB"></script> <title>添加多个标注点</title></head><body> <div id="allmap"></div></body></html><script type="text/javascript"> // 百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); //map.addOverlay(mk); map.panTo(r.point); alert('您的位置:'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) var data_info = [[113.30764968,23.1200491,"地址:北京市东城区王府井大街88号乐天银泰百货八层<br><a href='https://www.baidu.com'>详情<a>"], [116.406605,39.921585,"地址:北京市东城区东华门大街<br><a href='https://www.baidu.com'>详情<a>"], [116.412222,39.912345,"地址:北京市东城区正义路甲5号<br><a href='https://www.baidu.com'>详情<a>"]]; var opts = { width : 250, // 信息窗口宽度 height: 80, // 信息窗口高度// title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 }; for(var i=0;i<data_info.length;i++){ var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)); var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon: myIcon}); // 创建标注 var content = data_info[i][2]; map.addOverlay(marker); // 将标注添加到地图中 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 addClickHandler(content,marker); } //地图描点单击事件 function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); } function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 } //地图移动获取经纬度 map.addEventListener("moveend", function(){ console.log("lng: "+map.getCenter().lng); console.log("lat: "+map.getCenter().lat); }); // 添加带有定位的导航控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 console.log("经度 lng:"+e.point.lng); console.log("维度 lat:"+e.point.lat);// var address = '';// address += e.addressComponent.province;// address += e.addressComponent.city;// address += e.addressComponent.district;// address += e.addressComponent.street;// address += e.addressComponent.streetNumber;// alert("当前定位地址为:" + address); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); map.addControl(geolocationControl);</script>
0 0
- 百度地图API描点
- 百度地图API相关点
- 百度地图API计算俩点距离
- 百度地图API学习-----单击地图获取坐标点
- 百度地图api之点击地图获取坐标点
- 百度地图Api进阶教程-点聚合9.html
- 百度地图Api进阶教程-点聚合9.html
- 百度地图Api 接口实例 标记点源码分享
- 百度地图API开发:大量坐标点进行分组聚合
- 百度地图API 判断点是否在圆形内
- 百度地图API:自定义多个途经点的导航
- 百度地图api之Marker类--标记点固定
- 百度地图API 重新生成点聚合的功能
- 百度地图api点聚合简单demo实例
- 使用百度地图api采集兴趣点数据
- 快速接入百度地图定位、描点
- 百度地图取点
- 百度地图聚合点
- ArrayList和hashMap的几种遍历方法
- c++编写无向图 使用容器Vector编写邻接表法
- 文章标题
- Apache Rewrite规则详解
- Kilim 简介
- 百度地图API描点
- CodeVS-1669 (背包问题)
- [SMOJ1726]染色一
- Whats is the difference between train, validation and test set, in neural networks?
- Java基础练习
- struts2if标签判断对象值是否等于指定值
- eclipse svn回滚之前版本
- linux下搭建ftp服务器
- 涿州未来五年环境、城市及交通规划,绝对靠谱!