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

红太狼 2022-08-08 06:10 354阅读 0赞

【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" οnclick="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 οnkeypress="if(event.keyCode == 13) return false;">
            <input type="text" name="point_y" id="lat" size=15 οnkeypress="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>

【js代码】

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图调用及定位

文章目录百度地图调用及定位百度地图调用及定位通过以下链接登录百度账号： [https://lbsyun.baidu.com/index.ph

素颜马尾好姑娘i/ 2022年10月12日 00:43/ 0 赞/ 378 阅读

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

【html代码】 <div class="control-group"> <label class="control-label">详细地址：</la

红太狼/ 2022年08月08日 06:10/ 0 赞/ 355 阅读

相关百度地图开发之定位

本文主要讲述利用百度地图API实现定位功能第一步:下载SDK与申请KEY 参考链接：[Android 百度地图 SDK v3.0.0 （一） - Hongyang

雨点打透心脏的1/2处/ 2022年07月29日 11:50/ 0 赞/ 358 阅读

相关百度地图定位详解

百度地图这几天一直闷在家里搞百度地图，但是搞来搞去，我的android studio IDE硬是搞不出地图，在过程中出现了一次默认的北京地图，不过然并卵；我总结

ゝ一纸荒年。/ 2022年07月16日 01:16/ 0 赞/ 350 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 388 阅读

相关 Android百度地图(一):百度地图定位sdk 类方法参数、定位原理详细介绍

本文主要针对百度定位sdk的api进行详细说明、注意事项，还会简单的谈一下定位的原理，目的是让读者真正了解定位，只有在完全了解的情况下，在开发中才会少走弯路，少踩坑。一

川长思鸟来/ 2022年06月08日 05:38/ 0 赞/ 1255 阅读

相关百度地图定位

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl

╰半橙微兮°/ 2022年05月06日 04:27/ 0 赞/ 418 阅读

相关百度地图定位笔记

首先在[百度地图开发平台][Link 1]注册并且申请密钥一顿操作之后，生成一个访问应用（AK），这个就是密钥 <script type="text/javas

太过爱你忘了你带给我的痛/ 2022年04月25日 01:30/ 0 赞/ 422 阅读

相关 js调用百度地图api实现定位

<?php / Created by PhpStorm. User: onlythen Date: 5/26/15

深藏阁楼爱情的钟/ 2022年04月08日 11:30/ 0 赞/ 534 阅读

相关 JS百度地图显示

步骤 1.百度地图API接口:[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 2.![在这里插入图片描述][wat

我不是女神ヾ/ 2022年03月02日 13:30/ 0 赞/ 445 阅读