返回对应的信息美高梅赌堵59599,根据经纬度在地图上显示相应的位置

2019-11-26 作者:联系我们   |   浏览(160)

javascript贯彻经纬度与地址的互转,javascript经纬度

  近期项目中会用到将地方转变为治理的。从出来,还直接未相见过那类难题,下来本人提前攻读了,将和谐所学的记录在案。

  在互连网找了点不清材质,最终明确了,百度的API,有贯彻相关的接口(API地址卡塔 尔(阿拉伯语:قطر‎。使用API时,需求申请叁个ak,能力平时的进行会见。

  美高梅赌堵59599 1

  上图是一个原理,即当大家传入对应的值时,重返对应的音信。这里小编未来了回去json对象,对于XML操作有一点点复杂,在这里省略。注:在用ajax调用时,dataType一定料定为JSONP,不然,你就慢慢找错呢(这也是花了自家无数时光的地点,压抑了非常久卡塔尔。这里为JSONP是因为此处跨域了。好了,下边就径直上代码了:

美高梅赌堵59599 2 1 <form id="form1" runat="server"> 2 <div style="width: 500px; height: 100px; border: 1px solid; float: left;"> 3 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址:</span> 4 <input type="text" id="address" placeholder="巴拿马城市金牛区生机勃勃环路西三段抚琴东南路抚林巷" style="width: 300px; height: 30px; margin: 20px 0 0 0;" /> 5 <input type="button" id="search_address" value="搜索" style="width: 60px; height: 30px;" /> 6 <br /> 7 <span id="lng" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度:</span><br /> 8 <span id="lat" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度:</span> 9 </div> 10 <div style="width: 500px; height: 500px; border: 1px solid; float: left; margin-left: 200px;"> 11 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度:</span> 12 <input type="text" value="" placeholder="104.05033320413" id="txtlng" style="width: 300px; height: 20px; margin: 20px 0 0 0;" /> 13 <br /> 14 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度:</span> 15 <input type="text" value="" placeholder="30.68458575873" id="txtlat" style="width: 300px; height: 20px; margin: 20px 0 0 0;" /> 16 <br /> 17 <input type="button" id="search_lng_lat" value="搜索" style="height: 30px; margin-top: 12px; margin-left: 220px;" /><br /> 18 <span id="spanadderss" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址:</span> 19 </div> 20 </form> View Code 美高梅赌堵59599 3 1 $(document).ready(function () { 2 /* 3 事务厅方新闻获取经纬度,重回json对象: 4 status Int 再次回到结果意况值,成功重临0。 5 location object 经纬度坐标 6 lat float 纬度值 7 lng float 经度值 8 precise Int 地方的增大新闻,是或不是可相信查找。1为正确查找,0为不标准。 9 confidence Int 可靠度 10 level string 地址类型 11 12 { 13 status: 0, 14 result: 15 { 16 location: 17 { 18 lng: 116.30814954222, 19 lat: 40.056885091681 20 }, 21 precise: 1, 22 confidence: 80, 23 level: "商务大厦" 24 } 25 } 26 */ 27 $('#search_address').click(function () { 28 var address = $.trim($('#address').val()); 29 if (address != undefined && address != '') { 30 var url = ''

  • encodeU奥德赛IComponent(address); 31 //事务部点名称获取经纬度新闻 32 $.ajax({ 33 type: "POST", 34 url: url, 35 dataType: "JSONP", 36 success: function (data) { 37 if (parseInt(data.status) == 0) { 38 $("#lng").html("经度:" + data.result.location.lng); 39 $("#lat").html("纬度:" + data.result.location.lat); 40 } 41 } 42 }); 43 } 44 }); 45 /* 46 依据经纬度获取详细地址及其广大音讯,再次回到json对象: 47 status constant 再次回到结果意况值, 成功重临0,其余值请查看附录。 48 location 49 lat 纬度坐标 50 lng 经度坐标 51 formatted_address 结构化地址音讯 52 business 所在商圈消息,如 "人民高校,中关村,塞内加尔达喀尔街" 53 addressComponent city 城市名 54 district 区或县名 55 province 省名 56 street 街道名 57 street_number 街道门牌号 58 pois(相近poi数组卡塔尔国 59 addr 地址新闻 60 cp 数据来源 61 distance 离坐标点间距 62 name poi名称 63 poiType poi类型,如’ 办公大厦,商务大厦’ 64 point poi坐标{x,y} 65 tel 电话 66 uid poi唯生机勃勃标记 67 zip 邮政编码 68 */ 69 $('#search_lng_lat').click(function () { 70 var lng = $.trim($('#txtlng').val()); 71 var lat = $.trim($('#txtlat').val()); 72 var url = ''
  • lat + "," + lng; 73 $.ajax({ 74 type: "POST", 75 url: url, 76 dataType: "JSONP", 77 success: function (data) { 78 if (parseInt(data.status) == 0) { 79 var result = "地址:" + data.result.formatted_address + "</br>"; 80 result += "省名:" + data.result.addressComponent.province + "</br>"; 81 result += "城市名:" + data.result.addressComponent.city + "</br>"; 82 result += "区或县名:" + data.result.addressComponent.district + "</br>"; 83 result += "街道名:" + data.result.addressComponent.street + "</br>"; 84 result += "街道门牌号:" + data.result.addressComponent.street_number + "</br>"; 85 result += "相近消息:</br>"; 86 for (var i = 0; i < data.result.pois.length; i++) { 87 result += "地址音信:" + data.result.pois[i].addr 88 + ",数据来源于:" + data.result.pois[i].cp 89 + ",离坐标点间距:" + data.result.pois[i].distance 90 + ",poi名称:"
  • data.result.pois[i].name 91 + ",poi类型:" + data.result.pois[i].poiType 92 + ",poi坐标x:" + data.result.pois[i].point.x 93 + ",poi坐标y:" + data.result.pois[i].point.y 94 + ",电话:" + data.result.pois[i].tel 95 + ",poi唯生机勃勃标记:" + data.result.pois[i].uid 96 + ",邮编:" + data.result.pois[i].zip + "</br>"; 97 } 98 $('#spanadderss').html(result); 99 } 100 } 101 }); 102 }); 103 }); View Code

  代码中已经有详尽的解释了,若果实在不懂的话,就点击API地址,这里面更详细。这里只是私房的知识收拾,只做为三个笔录,若对您能有何扶植,那本身也认为拾叁分欢畅。

近几年叁个项目用到了经纬度,依据经纬度在地图上海展览中心示相应的职分

应用百度地图api达成基于地方询问经纬度,api地址询问

复制代码 代码如下:

<html xmlns=";
<head>
    <title>根据地方询问经纬度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src=";
</head>
<body style="background:#CBE1FF">
    <div style="width:730px;margin:auto;">  
        要询问的地点:<input id="text_" type="text" value="常州古彭广场" style="margin-right:100px;"/>
        查询结果(经纬度):<input id="result_" type="text" />
        <input type="button" value="查询" onclick="searchByStationName();"/>
        <div id="container"
            style="position: absolute;
                margin-top:30px;
                width: 730px;
                height: 590px;
                top: 50;
                border: 1px solid gray;
                overflow:hidden;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("徐州", 12);
    map.enableScrollWheelZoom();    //启用滚轮放大收缩,私下认可禁止使用
    map.enableContinuousZoom();    //启用地图惯性拖拽,暗中同意禁止使用
    map.addControl(new BMap.NavigationControl());  //增多暗中认可缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //增加默许缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调度窗体大小
function searchByStationName() {
    map.clearOverlays();//清空原本的标号
    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("result_").value = poi.point.lng + ","

  • poi.point.lat;
            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创造标明,为要询问的地点对应的中纬度
            map.addOverlay(marker);
            var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
            marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的卡通
        });
        localSearch.search(keyword);
    }
    </script>
    </html>

上述正是代码的全体内容了,小友人们能够直接利用在项目中哦,不用跟自家说感谢,请叫本人雷锋同志大大~

复制代码 代码如下: html xmlns="" head title根据地方询问经纬度/...

百度地图API, 文书档案不全,例子不细瞧。 在网络还还未太多卓有成效的事例。比方说上面多少个必要的化解方案就找不到:

高德地图依照入眼词坐标拾取小工具,高德关键词坐标拾取

几近来上午在写代码的时候,供给接收地图坐标拾取工具,大家用的是搞的地图,在高德地图API官网中未有找到有关的坐标拾取工具。在英特网找到那样个小工具,与我们分享下!

javascript调用Google的地形图通过经纬度动态的改良地图

能够参照望看那些网页。
参照他事他说加以考察资料:www.zhongguosou.com/zonghe/dili_jingweidu.html  

美高梅赌堵59599 4

  1. 哪些用百度地图API查询三个地方的经纬度。

  2. 怎么用百度地图通过叁个经纬度查询商圈和地址。

CSS

美高梅赌堵59599 5 1 html { background-color: #fff; } 2 body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p { margin: 0; padding: 0; font-family: 微软雅黑; } 3 h3 { +font-size:14px; _font-size: 14px; } 4 img { border: none; } 5 .c { clear: both; } 6 ul, ol, li { list-style: none; } 7 .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; overflow: hidden; clear: both; } 8 * html .clearfix { height: 1%; } 9 * + html .clearfix { height: 1%; } 10 body { font: 12px/1.5em 微软雅黑,Arial,Verdana,Helvetica,sans-serif; color: #333; } 11 button, input, select, textarea { color: #999; } 12 input[type="button"] { padding: 0 5px; color: #333; } 13 .demo_box { width: 360px; } 14 #iCenter { width: 100%; height: 100%; border: 1px solid #F6F6F6; } 15 #r_title { line-height: 28px; padding-left: 5px; background-color: #D1EEEE; font-weight: bold; } 16 #result { overflow: auto; margin-bottom: 5px; /* width:661px;*/ height: 500px; } 17 #result .sub_result { font-size: 12px; cursor: pointer; line-height: 20px; /*padding:0px 0 4px 2px;*/ border-bottom: 1px solid #C1FFC1; } 18 #result .sub_result .detail { } 19 #result .sub_result .detail h3 { color: #00A6AC; } 20 a { color: #067EC0; text-decoration: none; } 21 a:hover { text-decoration: underline; } 22 .note { color: #999; } 23 div.change { background-image: url(); } 24 div.change div { background-image: url(); } 25 .markerContentStyle { position: relative; } 26 .markerContentStyle span { background-color: #FFFFFF; color: #FF1493; width: 120px; heigth: 80px; border: 2px solid #D8BFD8; FONT-FAMILY: 华文行楷; position: absolute; top: -10px; left: 25px; white-space: nowrap -webkit-border-radius:5px; border-radius: 5px; } 27 div.info { position: relative; z-index: 100; border: 1px solid #BCBCBC; box-shadow: 0 0 10px #B7B6B6; border-radius: 8px; background: rgb(255,255,255); /* The Fallback */ background-color: rgba(255,255,255,0.9); transition-duration: 0.25s; } 28 div.info:hover { box-shadow: 0px 0px 15px #0CF; } 29 div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; } 30 div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; } 31 div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; } 32 div.info-top img:hover { box-shadow: 0px 0px 5px #000; } 33 div.info-middle { font-size: 12px; padding: 10px; line-height: 21px; } 34 div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; } 35 div.info-bottom img { position: relative; z-index: 104; } 36 table { height: 100%; } 37 html, body { height: 100%; margin: 0px; padding: 0px; } 38 .STYLE1 { color: #F3F3F3; } View Code

 

什么人可以利用JavaScript达成地图上点的来得,即在某大器晚成经纬度上加个点(或小圆圈卡塔 尔(阿拉伯语:قطر‎

自己有一个用js 画圆形的效劳估算你改改就能够了,你将下边包车型大巴代码保持下看看效果:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> vml </title>
<style>
v:* {behavior:url(#default#VML);}
body { padding:0px;margin:0px; }
</style>
</head>

<body>

<div style="position:absolute;top:50px;left:50px;">以mousedown为圆心画椭圆(IE ONLY卡塔尔国</div>

<v:oval id="oval1"
strokecolor="green" filled="F"
style="position:absolute;top:-50px;left:-50px;width:5px;height:5px;">
</v:oval>

<div style="position:absolute;top:1500px;left:1500px;width:50px;height:50px;"></div>

<script type="text/javascript">
var ox=0,oy=0,w,h,r,start=0;
document.ondragstart = function(){return false;}
document.onselectstart = function(){return false;}
document.onmousedown = function (){
if(event.x>document.body.clientWidth || event.y>document.body.clientHeight)return;
ox=event.x+document.body.scrollLeft,oy=event.y+document.body.scrollTop;
document.onmousemove = _mousemove;
document.onmouseup = function(){document.onmousemove = null;}
}
_mousemove = function (){
var dx=(ox-event.x-document.body.scrollLeft),dy=oy-event.y-document.body.scrollTop;
if(dx==0 && dy==0)return;
oval1.style.left=(ox-Math.abs(dx))+'px';
......余下全文>>  

目前项目中会用到将地址调换为治理的。从出来,还直接未超过过这类难题,下来自个儿提...

后台实今世码:
html代码:

3.点击百度地图时, 获得点击地方的中纬度。

JS

美高梅赌堵59599 6 1 var mapObj; 2 var marker = new Array(); 3 var windowsArr = new Array(); 4 //基本地图加载 5 function mapInit() { 6 mapObj = new AMap.Map("iCenter"); 7 //AMap.event.addListener(mapObj,'click',getLnglat); 8 } 9 function placeSearch() { 10 var MSearch; 11 mapObj.plugin(["AMap.PlaceSearch"], function () { 12 MSearch = new AMap.PlaceSearch({ //构造地点查询类 13 pageSize: 10, 14 pageIndex: 1, 15 city: "021" //城市 16 }); 17 AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//重临地点查询结果 18 var searchName = document.all.searchText.value;//查询关键字 19 MSearch.search(searchName); //关键字查询 20 }); 21 } 22 //增多marker&infowindow 23 function addmarker(i, d) { 24 var lngX = d.location.getLng(); 25 var latY = d.location.getLat(); 26 var markerOption = { 27 map: mapObj, 28 icon: "" + (i + 1) + ".png", 29 position: new AMap.LngLat(lngX, latY) 30 }; 31 32 var mar = new AMap.Marker(markerOption); 33 marker.push(new AMap.LngLat(lngX, latY)); 34 35 var infoWindow = new AMap.InfoWindow({ 36 content: "<h3><font color="#00a6ac"> " + (i + 1) + ". " + d.name

  • "</font></h3>" + TipContents(d.type, d.address, d.tel), 37 size: new AMap.Size(300, 0), 38 autoMove: true, 39 offset: new AMap.Pixel(0, -30) 40 }); 41 windowsArr.push(infoWindow); 42 var aa = function (e) { infoWindow.open(mapObj, mar.getPosition()); }; 43 AMap.event.addListener(mar, "click", aa); 44 AMap.event.addListener(mar, 'click', getLnglat); 45 } 46 //回调函数 47 function keywordSearch_CallBack(data) { 48 var resultStr = ""; 49 var poiArr = data.poiList.pois; 50 var resultCount = poiArr.length; 51 for (var i = 0; i < resultCount; i++) { 52 resultStr += "<div id='divid" + (i + 1) + "' onclick='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style="font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;"><table><tr><td><img src="" + (i + 1) + ".png"></td>" + "<td><h3><font color="#00a6ac">名称: " + poiArr[i].name + "</font></h3>"; 53 resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; 54 addmarker(i, poiArr[i]); 55 } 56 mapObj.setFitView(); 57 document.getElementById("result").innerHTML = resultStr; 58 59 } 60 function TipContents(type, address, tel) { //窗体内容 61 if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") { 62 type = "暂时未有"; 63 } 64 if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { 65 address = "暂时未有"; 66 } 67 if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") { 68 tel = "暂时未有"; 69 } 70 var str = " 地址:" + address + "<br /> 电话:" + tel + " <br /> 类型:" + type; 71 return str; 72 } 73 function open马克尔TipById1(pointid, thiss) { //依照id 张开找寻结果点tip 74 thiss.style.background = '#CAE1FF'; 75 windowsArr[pointid].open(mapObj, marker[pointid]); 76 77 //result中各种div触发的事件 78 document.getElementById("lngX").value = marker[pointid].getLng(); 79 document.getElementById("latY").value = marker[pointid].getLat(); 80 81 } 82 function onmouseout_马克尔Style(pointid, thiss) { //鼠标移开后点样式复苏 83 thiss.style.background = ""; 84 } 85 //鼠标在地形图上点击,获取经纬度坐标 86 function getLnglat(e) { 87 document.getElementById("lngX").value = e.lnglat.getLng(); 88 document.getElementById("latY").value = e.lnglat.getLat(); 89 } 90 91 //关闭页面 92 function CloseWind() { 93 var lat = document.getElementById("lngX").value; 94 var lon = document.getElementById("latY").value; 95 opener.setValue(lat + "," + lon); 96 window.close(); 97 98 } View Code

 

 代码如下

  1. 即便依据时间轴动态展现热力图的变迁。 

HTML

美高梅赌堵59599 7 1 <script type="text/javascript" src="; 2 <table width="百分之百" border="0" cellspacing="0" cellpadding="0"> 3 <tr> 4 <td colspan="2" height="50"> 5 <br> 6 高德地图:<input type="text" name="searchText"> 7 <input type="button" value="查询" onclick="placeSearch()" /> 输入地方音讯 8 <br><br>地图经纬度坐标: X:<input type="text" id="lngX" name="lngX" /> Y:<input type="text" id="latY" name="latY" /> 9 <input type="button" name="btn_Close" id="btn_Close" value="明显,并关闭页面" onclick="CloseWind();" /> *筛选准确地方之后,请点击该按键 10 </td> 11 </tr> 12 <tr> 13 <td width="七成" height="500"> <div style="height:百分之百" id="iCenter"></div></td> 14 <td valign="top"> 15 <div class="demo_box"> 16 <div id="r_title"><b>关键字查询结果:</b></div> 17 <div id="result"> </div> 18 </div> 19 <span class="STYLE1"></span> 20 </td> 21 </tr> 22 </table> View Code

 

工程师天猫店:

<script src=";
<script type="text/javascript" src=";
<div style="width:730px;margin:auto;">  
     要询问之处:<input id="text" type="text" value="" style="margin-right:100px;"onkeyup="searchByStationName();"/>
     查询结果(经纬度):<input id="result" type="text" />
     <div id="container"></div>
</div>
css代码:
<style>
    #container{position: absolute; margin-top:30px; width: 500px; height: 500px;  top: 50; border: 1px solid gray;overflow:hidden;display:none;}
</style>
js代码:
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("北京市", 12);
    map.enableScrollWheelZoom();    //启用滚轮放大降低,私下认可禁止使用
    map.enableContinuousZoom();    //启用地图惯性拖拽,默许禁止使用

小编明天玩了一早晨百度地图javascript API,解决了下边包车型大巴多少个难题,顺路用一点点打车客户的取样数据做三个数量可视化, 给大家提供二个足以参照的例子

高德地图增加圆形覆盖物后持续响应鼠标拾取地图坐标?

支出的标题能够到高德论坛里面去咨询啊  

    map.addControl(new BMap.NavigationControl());  //增添私下认可缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //增多暗中认可缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开

首先数据是出自Hong Kong市某些周天的外出数据, 个中包涵出发地方和达到地方的中纬度。

高德地图500新型版本怎寻找地名,在增进地址栏的边际未有检索的Logo?点击什地点找找?

你用的是android手提式无线电话机吧?那版在输入上边做成了跟ios黄金时代致的,也等于说,你输入完关键词,直接开关盘上的回车就能够了。话说,输入栏旁边未有检索按键,真的不习贯。  

几近来早上在写代码的时候,要求运用地图坐标拾取工具,大家用的是搞的地图,...

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调解窗体大小
function searchByStationName() {
    map.clearOverlays();//清空原本的注脚
    var keyword = document.getElementById("text").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("result").value = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 18);
        var marker = new BMap.马克尔(new BMap.Point(poi.point.lng, poi.point.lat));  // 创制标记,为要询问的位置对应的经纬度
        map.addOverlay(marker);
        var content = document.getElementById("text").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
         marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动漫片
    });
    localSearch.search(keyword);
}

{"passenger_phone":"XXX","start_location_lng":"116.31414794922","start_location_lat":"40.080762261285","end_location_lng":"116.3363","end_location_lat":"40.07079"}

$("document").ready(function(){
    $("#text").focus(function(){
        $("#container").css("display","block");
    });
    $("#text").blur(function(){
        $("#container").css("display","none");
    });
});
</script>

{"passenger_phone":"XXX","start_location_lng":"116.734490","start_location_lat":"39.903438","end_location_lng":"116.735160","end_location_lat":"39.962470"}

==============分割线==============
前边八个呈现代码:

鉴于数量是从spark里询问出来放在hadoop上,是map后的贰个结实, 因而每条数据的间距符号是换行。这产生本人必须在js里把数据文件命名称为txt文件, 並且在js里做一些例外管理。 

 代码如下

百度地图API, 因为须要频仍在js里依据鼠标点击获得地理地点和商圈音信,  因而在html创立了二个不可以见到的container用来加载地图查询模块

<div class="contact-map">
                    <style type="text/css">
                                    #allmap {width: 100%;height:274px;border:1px solid #dedede;overflow: hidden;margin:0 auto; background-color:#ffffff;margin-top:8px;}
                                    #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
                                    #r-result{height:100%;width:20%;float:left;}
                                </style>
                                <script src="" type="text/javascript"></script>
                            <!-------------地图坐标脚本甘休----------->
                                 <div id="allmap"></div>
                                <script type="text/javascript">
                                        var map = new BMap.Map("allmap");                        // 创建Map实例
                                        map.addControl(new BMap.NavigationControl());
                                        map.enableScrollWheelZoom();
                                        var myEl = "{$info.jwd}";-------------------------------------------->后台拾取的经纬度
                                        var myA=myEl.split(",");
                                        var point = new BMap.Point(myA[0], myA[1]);
                                        //alert(myEl);
                                        map.centerAndZoom(point, 18);
                                        var marker = new BMap.Marker(point);    // 创立评释
                                        map.addOverlay(marker);                            // 将标记增添到地图中
                                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的卡通片
                                </script>       
                                <!--地图-->
                </div>

<div id="dummy" style ="display:none"></div>

用来加载百度地图javascript model用来查询地理新闻。 

var bmap4search= new BMap.Map("dummy");

var localSearch = new BMap.LocalSearch(bmap4search);

鉴于须求搜索鼠标点击地点五英里范围内的人数, 因而须求一个测算地理间距的函数。

function rad(d)

{

  return d * Math.PI / 180.0;

}

 function getDistance(lng1,lat1, lng2,lat2)

    {

    radLat1 = rad(lat1);

  radLat2 = rad(lat2);

  a = radLat1 - radLat2;

  b = rad(lng1) - rad(lng2);

  s=2*Math.asin(

Math.sqrt(Math.pow(Math.sin(a/2), 2.0)+

Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2), 2.0)));

  EARTH_RADIUS = 6378.137;

  s = s * EARTH_RADIUS;

  s = Math.round(s*10000) / 10000;

  return s;

    }

页面加载后, 首先呈现客商出发热力图, 看上去回龙观还真疑似首都的大自然主旨, 出游顾客最密集。 

用鼠标点击地图上的某三个点, 能够得到该点的地址消息。参照他事他说加以考察下一张图。

美高梅赌堵59599 8

用鼠标点击回龙观地方, 动态得到二个坐标后, 按键“点击突显5海里内......”亮了。 点击按键能够查阅这个回龙观的客商, 星期天出游目标地是哪儿。结果开掘回龙观的大众礼拜日比较多也只在回龙观周围摆动。 

美高梅赌堵59599 9

关于播放时间轴热力图变化的标题, 其实是经过重复设置option时间的,方法与上海教室完全相像

myChart.setOption(map_option);

上边几张图是回龙观公众在临晨1点~5点定期间轴变化的出游热力图

美高梅赌堵59599 10

 

临晨3点

美高梅赌堵59599 11

 

临晨5点

美高梅赌堵59599 12

早晨7点

 美高梅赌堵59599 13

可以看来地方亮了多少个点, 放大地图看看。

发觉各自是, 全球译大厦, 融泽嘉园售楼处, 回龙观镇卫生所。还恐怕有一个高等第公路收取费用站口

上面是一些代码。

<!DOCTYPE html>

<html style="height: 100%">

<head>

    <meta charset="utf-8">

<script type="text/javascript" src=";

</head>

<body style="height: 100%; margin: 0">

<div style ="z-index=999">

<input type="button" value="点击切换成出发热力图" onclick="chg(0)" disabled=disabled ID="startBtn" NAME="Button1">

<input type="button" value="点击切换成到达热力图" onclick="chg(1)" ID="endBtn" NAME="Button1">

</div>

<div>

<div id=mytips style="z-order=999;background-color:#F0F8FF;width:100;height:16;border:2px solid gray;display:none;filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5);left:5;top:5"></div>

<input type="button" value="点击彰显5公里内嘀嘀新客的指标地或许来源" disabled=disabled onclick="showDS()" ID="src_dest_Btn" NAME="Button1">

</div>

本文由美高梅赌堵59599发布于联系我们,转载请注明出处:返回对应的信息美高梅赌堵59599,根据经纬度在地图上显示相应的位置

关键词: