web项目中嵌入百度地图

主要步骤:

【1】地图初始化。

【2】根据坐标得到地址描述,并将地址描述,标注到地图中。

【3】GPS坐标转换为百度坐标。由于手机提供的是GPS坐标,所以需转换为百度坐标,才能使得地址标注正确。


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="lib/map/baidu/convertor.js"></script>
</head>
<body>


<div style="width:800px;height:600px;border:1px solid gray" id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");  // 创建地图实例
//var longitude=getUrlParam("longitude");//经度
//var latitude=getUrlParam("latitude");//纬度
var longitude="119.306667";//经度
var latitude="26.075208";//纬度
var point = new BMap.Point(longitude, latitude);  // 创建点坐标
map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl());  //添加放大、缩小控件
map.enableScrollWheelZoom();//允许鼠标滑轮操作


//坐标转换完之后的回调函数

translateCallback = function (point){

    var marker = new BMap.Marker(point);

    map.addOverlay(marker);

    //根据坐标得到地址描述  
	var myGeo = new BMap.Geocoder();  
	myGeo.getLocation(point, function(result){  
		if (result){  
			var label = new BMap.Label(result.address,{offset:new BMap.Size(20,-10)});
			marker.setLabel(label);
		}});  
	
	// 将标注添加到地图中
	map.addOverlay(marker);
	
	//将坐标设置为地图中心位置
    map.setCenter(point);
}



setTimeout(function(){
    BMap.Convertor.translate(new BMap.Point(longitude, latitude),0,translateCallback);     //真实经纬度转成百度坐标
}, 2000);



</script>

</body>
</html>

坐标转换需用到convertor.js


//2011-7-25
(function(){        //闭包
function load_script(xyUrl, callback){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = xyUrl;
    //借鉴了jQuery的script跨域方法
    script.onload = script.onreadystatechange = function(){
        if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
            callback && callback();
            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            if ( head && script.parentNode ) {
                head.removeChild( script );
            }
        }
    };
    // Use insertBefore instead of appendChild  to circumvent an IE6 bug.
    head.insertBefore( script, head.firstChild );
}
function translate(point,type,callback){
    var callbackName = 'cbk_' + Math.round(Math.random() * 10000);    //随机函数名
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
    //动态创建script标签
    load_script(xyUrl);
    BMap.Convertor[callbackName] = function(xyResult){
        delete BMap.Convertor[callbackName];    //调用完需要删除改函数
        var point = new BMap.Point(xyResult.x, xyResult.y);
        callback && callback(point);
    }
}

window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();




©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页