js 百度地图标记定位（一）

标签：百度地图   js   

【html代码】

<div class="control-group">
    <label class="control-label">详细地址：</label>
    <div class="controls">
        <input type="text" id="addr" value="" name="detil_addr"/>
        <input type="button" value="点击定位" style="width:100px;" class="NFButton" onclick="dingwei()">
    </div>
</div>
<div class="control-group">
    <label class="control-label">经纬度：</label>
    <div class="controls">
        <input type="text" name="point_x" id="lng" size=15 onkeypress="if(event.keyCode == 13) return false;">
        <input type="text" name="point_y" id="lat" size=15 onkeypress="if(event.keyCode == 13) return false;">
        <input type="hidden" id="zoom" name="zoom" value="15"  size=5>
    </div>
</div>

<!-- 地图那区域 -->
<div id="content" style="width:95%;height:404px;margin:0 auto;border:1px solid #d3d3d3;">
    <div style="float:left;height:400px;width:100%;display:-webkit-box;overflow:hidden;" id="l-map"></div>
</div>
<div class="clear"></div>
<!-- 地图那区域 -->

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tuiUeyv6BDiWUuvxwqrS3M8o"></script>


 <script type="text/javascript">

        (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;
        })();

    </script>

<script type="text/javascript">

    var cityName = "杭州市";
    var desAddress =  "西湖区";
    var p2;



	 function addMarker(point,obj,p1){

        var opt = {"title":"","enableDragging":true};

        var marker = new BMap.Marker(point,opt);
        map.addOverlay(marker);

        marker.addEventListener("mouseup", function(e1){
            //alert(e1.point);
			a(e1.point);
        });

    }

    // 百度地图API功能    new BMap.Point(120.204, 33.3)
    var map = new BMap.Map("l-map");



	var dbx="120.137034";
	var dby="30.280934";
	var dbz=12;

	if (dbx && dby && dbz)
	{
		map.centerAndZoom(new BMap.Point(dbx,dby),12);
		addMarker(new BMap.Point(dbx,dby));
	}else{

			var myGeo = new BMap.Geocoder();
			myGeo.getPoint(desAddress, function(point){
				if (point) {
					p2 = point;
					map.centerAndZoom(p2, 12);
				}
				else
				{
					alert("对不起，获取不到您的位置！")
				}
			}, cityName);
	}


    map.addEventListener("click", function(e){
//        alert(e.point.lng + " " + e.point.lat);
        a(e.point);
    });

    function a(pp){
		var x=pp.lng
		var y=pp.lat

		document.getElementById('lng').value=""+ x + ""; //经度
		document.getElementById('lat').value=""+ y +""; //维度
		document.getElementById('zoom').value=""+map.getZoom()+"";

        map.clearOverlays();
		addMarker(new BMap.Point(x,y));

//    var marker = new BMap.Marker(new BMap.Point(x, y));        // 创建标注
//    map.addOverlay(marker);
    }


    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom(true);


    var options = {
        renderOptions:{map: map, autoViewport: true},

        onSearchComplete: function(results) {
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                // 获取第一条方案
                var plan = results.getPlan(0);

                // 获取方案的驾车线路
                var route = plan.getRoute(0);

                // 获取每个关键步骤,并输出到页面
                var s = [];
                for (var i = 0; i < route.getNumSteps(); i++) {
                    var step = route.getStep(i);
                    s.push((i + 1) + ". " + step.getDescription());
                }
                //document.getElementById("r-result").innerHTML = s.join("<br/>");
            }
        }
    };


    var ctrl = new BMapLib.TrafficControl({
        showPanel: false //是否显示路况提示面板
    });
    map.addControl(ctrl);
    ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);

    //var x = document.getElementById("demox");

    var p1;
    function showPosition(position) {

        BMap.Convertor.translate(new BMap.Point(position.coords.longitude, position.coords.latitude), 0, function(point) {
            //marker.setPosition(point);
            map.panTo(point);
            p1 = point;
            //var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            driving.search(p1, p2);
        });
    }

function dingwei(){
	var adr=document.getElementById('addr').value;
if(adr=='')
{
	alert('请输入正确地址');
	document.getElementById('addr').focus();
	return;
}
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(adr, function(point){
        if (point) {
            p2 = point;
            map.centerAndZoom(p2, 13);
			map.clearOverlays();
			addMarker(p2);
				document.getElementById('lng').value=""+ point.lng + "";
				document.getElementById('lat').value=""+ point.lat +"";
        }
		else
		{
			alert("对不起，自动定位方式获取不到您的位置！")
		}
    }, cityName);

}

</script>

【css代码】

<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<style>.Tadd span{margin:0px;}</style>

js 百度地图标记定位（一）

标签：百度地图   js   

原文地址：http://blog.csdn.net/wujiangwei567/article/details/45540897