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" ο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 IEscript.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.lngvar y=pp.latdocument.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 百度地图标记定位（一）相关推荐

Android 之一 Android Studio 安装、配置等新手入门 + 百度地图定位 + 移动摇杆的实现
缘起之前在玩一款 VR 游戏:一起来捉妖.这款游戏是使用地图进行游戏的.无奈网上找了各种工具,要么付费,要么不好使.想想自己就是个程序猿,于是乎决定自己开发一个.现在游戏基本放弃了,但是为了游戏 ...
baidumap vue 判断范围_vue百度地图 + 定位的详解
vue 百度地图 + 定位前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中配置BMa ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
百度地图定位偏差了吗？用微信定位完美解决。
博客好久没更新了,可能是我懒了,也可能是最近太忙了.最近项目中有个需求,需要用到定位来查看用户的位置. 于是乎..... 成功的流程通过微信定位获取经纬度坐标 ==>拿到坐标后通过百度地图的坐 ...
百度IP定位和百度地图API定位
百度IP定位和百度地图API定位在这里根据你所获得ip,来确定这个ip的大体位置 [java] view plaincopy <span style="font-size:14px; ...
vue 百度地图 + 定位
vue 百度地图 + 定位 > 前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中 ...
vue cli3 百度地图定位
一.index.html 引入js <script type="text/javascript" src="http://api.map.baidu.com/a ...
手机获取百度地图定位
前段时间研究经纬度定位,发现根据经纬度定位之后,与所在位置出现不小的偏差.然后根据百度地图API研究了一下如何将经纬度转换成百度定位,话不多说,直接上代码. <!DOCTYPE html PUB ...

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

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

最新文章

热门文章