Article Detail

获取用户地理位置结合百度地图点击生成和拖动标注

HTML5 地理位置定位（HTML5 Geolocation）原理及应用（调用GPS） HTML5 Geolocation API 使用非常简单，基本调用方式...

HTML 阅读 64.5万 6 分钟阅读 2016-06-30 17:49

HTML5 地理位置定位（HTML5 Geolocation）原理及应用（调用GPS）
HTML5 Geolocation API 使用非常简单，基本调用方式如下：

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" /></head>
<body>










<?php
$gla=$_GET['la'];
$glo=$_GET['lo'];
if($gla && $glo){
?>
<div class="ditu" id="map" style="width:100%;height:300px;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=X8u8xx9GzO88EIydfLbTsvbK&v=1.0"></script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("map");
	map.centerAndZoom(new BMap.Point(<?php echo $glo;?>,<?php echo $gla;?>), 14);

	map.addControl(new BMap.ZoomControl());  //添加地图缩放控件
	var marker1 = new BMap.Marker(new BMap.Point(<?php echo $glo;?>,<?php echo $gla;?>));  //创建标注
	map.addOverlay(marker1);                 // 将标注添加到地图中
	//创建信息窗口
	//var infoWindow1 = new BMap.InfoWindow("广西有限公司<br>地址：南宁市江南区高棠路平阳仓库F8号");
	//marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
  map.addEventListener("click", function (e) {
    //marker1.setPoint(e.Point);
	map.clearOverlays();
    map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)));
	//alert(e.point.lng);
	//alert(e.point.lat);
    //将点击的点的坐标显示在页面上
    //document.getElementById("lng").value = e.point.lng;
    //document.getElementById("lat").value = e.point.lat;
    //InOrOutPolygon(e.point.lng, e.point.lat);
  });
</script>
<?php
}else{
?>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  //alert(position.coords.accuracy);
  location.href = '/index.php?s=/addon/Repair/Repair/test/la/'+ position.coords.latitude +'/lo/'+ position.coords.longitude+'.html';
  return false;
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;	
  }
getLocation();
</script>
<?php }?>










<a href="http://buildnet.net.cn/index.php?s=/addon/Repair/Repair/test.html">dafads</a>
</body>
</html>

Comments 评论区

广西南宁市 2016-06-30 17:51

百度地图Api进阶教程-点击生成和拖动标注

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>


<script type="text/javascript">
	var iscreatr=false;
	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
		
		map.addEventListener("click", function(e){
			if(iscreatr==true)return;
			//---------------------------------------------遮盖物---------------------------------------------
			iscreatr=true;
			 var point = new BMap.Point(e.point.lng ,e.point.lat);//默认
			 // 创建标注对象并添加到地图  
			 var marker = new BMap.Marker(point);  
			 var label = new BMap.Label("我是可以拖动的",{offset:new BMap.Size(20,-10)});
			 marker.setLabel(label)
			 map.addOverlay(marker);  
			 marker.enableDragging();    //可拖拽
			 marker.addEventListener("dragend", function(e){ 
					document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标
			 });
		});

	}
 
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	 // map.setZoom(14);   //放到到14级
</script>

#⁰

广西南宁市 2016-07-01 18:00

经度校正值： 0.008774687519;
纬度校正值： 0.00374531687912;

#⁰

广西南宁市 2016-07-01 18:03

百度地图坐标经纬度GPS转换API

<?php
$gla=$_GET['la'];
$glo=$_GET['lo'];
$url='http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x='.$glo.'&y='.$gla;
if($gla && $glo){
	$r=(get_web_page($url));
	$r=json_decode($r['content'],true);
	//print_r($r['y']);
	$glo=base64_decode($r['x']);
	$gla=base64_decode($r['y']);
}

header('Location:/index.php?s=/addon/Repair/Repair/writeRepair/la/'.$gla.'/lo/'.$glo.'.html');//跳转到带www的网址
function get_web_page( $url ){
        $options = array(
        CURLOPT_RETURNTRANSFER => true,     // return web page 返回网页
        CURLOPT_HEADER         => false,    // 不返回头信息
        CURLOPT_FOLLOWLOCATION => true,     // follow redirects
        CURLOPT_ENCODING       => "",       // handle all encodings
        CURLOPT_USERAGENT      => "spider", // 设置UserAgent
        CURLOPT_AUTOREFERER    => true,     // set referer on redirect
        CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect 连接超时
        CURLOPT_TIMEOUT        => 120,      // timeout on response 回复超时
        CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
        );
        $ch      = curl_init( $url );
        curl_setopt_array( $ch, $options );
        $content = curl_exec( $ch );
        $err     = curl_errno( $ch );
        $errmsg  = curl_error( $ch );
        $header  = curl_getinfo( $ch );
        curl_close( $ch );
        $header['errno']   = $err;
        $header['errmsg']  = $errmsg;
        $header['content'] = $content;
        return $header;
    }

#⁰

广西南宁市 2016-07-01 18:07

GPS坐标转换百度坐标JS源码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#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=1.5&ak=9fb983ecd9b505f8fedcc9ab07c65e3e"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<title>GPS转百度</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//GPS坐标
var xx = 117.126575995835;
var yy = 36.6702207308909;
var gpsPoint = new BMap.Point(xx,yy);

//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(gpsPoint, 15);
bm.addControl(new BMap.NavigationControl());

//添加谷歌marker和label
var markergps = new BMap.Marker(gpsPoint);
bm.addOverlay(markergps); //添加GPS标注
var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)});
markergps.setLabel(labelgps); //添加GPS标注

//坐标转换完之后的回调函数
translateCallback = function (point){
    var marker = new BMap.Marker(point);
    bm.addOverlay(marker);
    var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(point);
    alert("转化为百度坐标为："+point.lng + "," + point.lat);
}

setTimeout(function(){
    BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标
}, 2000);
</script>

参考 http://www.cnblogs.com/zhaohuionly/archive/2013/06/18/3142623.html

#⁰

广西南宁市 2016-11-01 16:45

判断一个标注点是否在多边形区域里

/**
			 * 计算一个点是否在多边形里
			 * @param {Object} pt 标注点
			 * @param {Object} poly 多边形数组
			 */
            function isInsidePolygon(pt, poly){
                for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
                    ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                    (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                    (c = !c);
                return c;
            }

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。