百度Api完成在线地图定位显示

地址:http://lbsyun.baidu.com/jsdemo.htm#c1_3

<!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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script&gt;
<title>添加多个标注点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map;
var cell_all=[];
var pointsArr=[];
var latlng=[];

loadData();
initMap();

map.panTo(pointsArr[pointsArr.length-1]);
//加载坐标点和数据
function loadData(){
//数据坐标点(按顺序输入,格式为 经度,维度|经度,纬度 经纬度用","分隔,没组经纬度数据用"|"分隔)
//百度地理坐标
var data="117.1554692,31.72431008|117.161034,31.722429|117.1610267,31.72337429";

//拆分字符串换格式存储
var latlng=data.split("|");
for(var i=0;i<latlng.length;i++){
       var obj=new Object();
       var point = new BMap.Point(parseFloat(latlng[i].split(",")[0]),parseFloat(latlng[i].split(",")[1]));
        pointsArr.push(point);
        obj.longitude=latlng[i].split(",")[0];
        obj.latitude=latlng[i].split(",")[1];
        cell_all.push(obj);
}

//高德地图数据处理转换为百度

/ var latlng=data.split("|");
for(var i=0;i<latlng.length;i++){
var obj=new Object();
var parseBaidu=bd_encrypt( parseFloat(latlng[i].split(",")[0]),parseFloat(latlng[i].split(",")[1]));
console.log(parseBaidu);
var point = new BMap.Point(parseBaidu.split(",")[0],parseBaidu.split(",")[1]);
pointsArr.push(point);
obj.longitude=parseBaidu.split(",")[0];
obj.latitude=parseBaidu.split(",")[1];
cell_all.push(obj);
}
/

}

//高德坐标转换为百度坐标
function bd_encrypt(gg_lon, gg_lat){
var X_PI = Math.PI 3000.0 / 180.0;
var x = gg_lon, y = gg_lat;
var z = Math.sqrt(x
x + y y) + 0.00002 Math.sin(y X_PI);
var theta = Math.atan2(y, x) + 0.000003
Math.cos(x X_PI);
var bd_lon = z
Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return bd_lon +","+bd_lat;
};

//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
//设置中心区域和地图层级
function createMap(){
map = new BMap.Map("allmap");
// map.centerAndZoom("合肥",14);
map.centerAndZoom(new BMap.Point(117.17,31.52),16);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}

//按顺序展示连线的方法
function showline(list){
    var polyline = new BMap.Polyline(list, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
            map.addOverlay(polyline);   //增加折线
}
function addMapOverlay(){
     //按顺序展示连线的方法,不需要注释掉即可
    showline(pointsArr);
    var opts = {
            width : 200,     // 信息窗口宽度
            height: 120,     // 信息窗口高度
            title : "坐标信息" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
           };
    for(var l=cell_all.length,i=0;i<l;i++){
        var obj=cell_all[i];
        var marker = new BMap.Marker(pointsArr[i]);        // 创建标注
        map.addOverlay(marker);

        var content=‘<table style="height: 100%;width:100%;overflow:scroll;"><tr> <td>点编号:</td><td>‘
                    +i+‘</td></tr>‘
                    +‘<tr><td>经度:</td><td>‘+obj.longitude+‘</td></tr>‘
                    +‘<tr><td>纬度:</td><td>‘+obj.latitude+‘</td></tr>‘
                    +‘</table>‘
                    ;
        addClickHandler(content,marker);
    }
    function addClickHandler(content,marker){
        marker.addEventListener("onmouseover",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); //开启信息窗口
    }

}  

//向地图添加控件
function addMapControl(){
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl());
}

</script>

原文地址:http://blog.51cto.com/11964104/2117520

时间: 2024-10-05 11:29:22

百度Api完成在线地图定位显示的相关文章

百度地图API定位+显示位置

1. 先在需要嵌入地图的页面引入map.js <script src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script> 2. 地图定位并显示位置信息 // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom

Android百度地图API集成二《定位》

书接上回 ↑ 基础地图请查看Android百度地图API集成一<基础地图>: 地址http://www.cnblogs.com/dhr125/p/5969980.html 1.在Application标签中声明SERVICE组件 <service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote"> <

html5定位并在百度地图上显示

在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolocation.getCurrentPosition(callback); 在获取坐标成功之后会执行回调函数 callback; callback 方法的参数就是获取到的坐标点:然后可以初始化地图,设置控件.中心点.缩放等级,然后给地图添加point的overlay: var map = new BM

arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.LayerSwitcherToolbar.js文件,里面自定义加载天地图.高德地图以及百度地图类,其实都是继承TiledMapServiceLayer类: (1)高德地图: //高德地图图层扩展 GAODELayer = DObject({ id:null, esriLayer: null, esri

百度地图api将可视区域定位到当前所在位置

1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能满足功能.以后将百度地图中所遇到的一些常见的功能整理一下,也方便一些童鞋参考.我的有一个项目中,就是要一开始将地图的可视区域定位在当前位置.其实很简单,网上一搜一大堆. 2.详情 说的再多,不如贴代码更来的直白.不过使用百度地图,一定要有ak.这个我想没有人不知道吧 1.引入js文件 1 <scri

openlayers3应用(一):显示百度在线地图

在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周折 贴上显示代码,以免其他人调用百度地图走弯路.效果如下: 调用代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

android 通过百度地图定位获取坐标在导航地图上面显示,坐标发生偏移

private void initMap() { // 定位初始化 mLocClient = new LocationClient(this); mLocClient.registerLocationListener(myListener); LocationClientOption option = new LocationClientOption(); option.setOpenGps(true);// 打开gps option.setCoorType("bd09ll"); //

百度地图API实现地图定位

1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=87be68605271c5e4cfe712787041be0a"></script> 2.HTML: 东经: <input name="longitude" onkeyup="dingwei()" value="@r

【百度地图】显示从某站点出发的所有公交车路线

需要在一个新的地方租房子或者买房子的时候,一个重要的考虑因素就是交通是否便利,我在租房子的时候就很想知道从我周边的公交车站,能够不换乘到达哪些地方,我当时有这个需求之后上网搜,并没有找到类似的功能,而且麻烦的是,百度地图最基本的API也没有同时显示多条线路的接口,所以只能借助百度地图的覆盖层来画折线,比较麻烦.于是就用百度地图的API简单实现了一个.效果图如下: 在线的演示请点击本链接.简单说一下功能.在左侧指定公交车站名和城市名,点击查询后出现符合搜索条件的地点列表及经过的公交线路(包括地铁)