首页 > 代码库 > Echarts 显示百度地图的用法(2)
Echarts 显示百度地图的用法(2)
<script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=2.0&ak=vgQfNjTQDlCar24CrTIdWcwY"></script><div id="allmap" style="height: 600px"></div><br/><span id="lng"></span><span id="lat"></span><script type="text/javascript"><script type="text/javascript"> $(function() { //==========隔1500秒调整视野到"上海"=========== //GetMapByChina(); //==========根据经纬度加载地图=============== //var pointX = "31.035434"; //var pointY = "121.248119"; //var address = "松江国际生态商务区光星路1688号(松江万达广场旁)"; //var buildName = "新江湾首府"; //GetMapByPoint(pointX, pointY, address, buildName); //===========根据项目地址获取地图信息 //GetMapByAddress("长宁区延安西路1160号","上海","首信银都"); //===========可拖拽地图显示坐标====== var pointX = "31.035434"; var pointY = "121.248119"; setLocation(pointX, pointY); }); //==========隔1500秒调整视野到"上海"=========== var map = new window.BMap.Map("allmap"); function GetMapByChina() { //百度地图API功能 map.centerAndZoom(new window.BMap.Point(116.403765, 39.914850), 7); map.enableScrollWheelZoom(); setTimeout(function() { getBoundary(); }, 1500); function getBoundary() { var bdary = new window.BMap.Boundary(); bdary.get("上海", function(rs) { //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for (var i = 0; i < count; i++) { var ply = new window.BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 map.setViewport(ply.getPath()); alert(map.point.layerX()); } }); } } //============根据经纬度加载地图============== function GetMapByPoint(pointX, pointY, address, buildName) { //lat 经度 lng 纬度 address 项目地址 name 项目名称 var point = new window.BMap.Point(pointY, pointX, address, buildName); SetContent(point, address, name); } //根据项目地址获取地图信息 function GetMapByAddress(address, city, name) { // 创建地址解析器实例 var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint(address, function(point) { if (point) { SetContent(point, address, name); } }, city); } function SetContent(point, address, name) { var map = new BMap.Map("allmap"); var marker = new BMap.Marker(point, { enableDragging: true, }); //enableDragging 标注物可拖拽 map.addOverlay(marker); //经度 alert("经度:" + point.lat); //纬度 alert("纬度:" + point.lng); var opts = { width: 200, // 信息窗口宽度 height: 60, // 信息窗口高度 title: name, // 信息窗口标题 enableMessage: false,//设置允许信息窗发送短息 //message: "您好,请点击下面的链接查看地图" }; var infoWindow = new BMap.InfoWindow("地址:" + address, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); map.centerAndZoom(point, 15); SetMarkerEvent(marker, infoWindow); //添加标注拖拽事件 map.enableScrollWheelZoom(true); //启动地图拖拽功能 map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, })); //右上角添加添加默认缩放平移控件 } //经纬度显示,拖拽后显示经纬度 function setLocation(x, y) {//参数:经纬度 map.clearOverlays(); var point = new window.BMap.Point(x, y); map.centerAndZoom(point, 7); var marker = new window.BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(); //可拖拽 $("#lng").val(point.lng); $("#lat").val(point.lat); map.enableScrollWheelZoom(); marker.addEventListener(‘dragend‘, getlngAndlat); //拖拽时调用的方法 function getlngAndlat(e) { if (e.point.lng != null) { $("#lng").val(e.point.lng); $("#lat").val(e.point.lat); alert("拖拽后的坐标经度:" + e.point.lng); alert("拖拽后的坐标纬度:" + e.point.lat); } } map.addOverlay(marker); }</script></script>
Echarts 显示百度地图的用法(2)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。