百度地图 js api 实现 line 居中显示

      项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能

     getbounds 返回地图可视区域,以地理坐标表示。 通过这个方法可以获取 line的四个角点坐标

     setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions])   根据提供的地理区域或坐标设置地图视野,调整后的视野会保证包含提供的地理区域或坐标。(自 1.1 新增)

 

  实现的思路如下 line的范围 ,用setViewport进行校正

bounds = this.polygonsArray[0].getBounds();


var boundsLB = bounds.getSouthWest();
var boundsRT = bounds.getNorthEast();
//对象的宽高
var geomW = boundsRT.lng - boundsLB.lng;
var geomH = boundsRT.lat - boundsLB.lat;
//左下
var lngLB = boundsLB.lng - geomW;
var latLB = boundsLB.lat - geomH;
//右上
var lngRT = boundsRT.lng + geomW;
var latRT = boundsRT.lat + geomH;
var viewport = [
new BMap.Point(lngLB,latLB),
new BMap.Point(lngRT,latRT)
];
this.map.setViewport(viewport);

转载于:https://www.cnblogs.com/lilefordream/p/3334354.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里提供一个使用百度地图API的Java代码示例,实现在地图上显示大连市各区域医院数量的可视化效果。 前提:首先你需要在百度地图开放平台上注册账号,并创建一个应用,获取到AK(密钥)。 代码示例: ```java import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLEncoder; import org.json.JSONArray; import org.json.JSONObject; public class MapDemo { public static void main(String[] args) throws IOException { String ak = "这里替换为你的AK"; String city = "大连市"; String[] districts = {"中山区", "西岗区", "沙河口区", "甘井子区", "旅顺口区", "金州区", "普兰店区", "瓦房店市", "庄河市", "长海县"}; int[] hospitalCount = new int[districts.length]; for (int i = 0; i < districts.length; i++) { String district = districts[i]; String urlStr = "http://api.map.baidu.com/place/v2/search?query=医院&region=" + URLEncoder.encode(city + district, "UTF-8") + "&output=json&ak=" + ak; URL url = new URL(urlStr); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setRequestMethod("GET"); BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8")); StringBuilder sb = new StringBuilder(); String line; while ((line = reader.readLine()) != null) { sb.append(line); } reader.close(); JSONObject jsonObj = new JSONObject(sb.toString()); int total = jsonObj.getInt("total"); hospitalCount[i] = total; } StringBuilder data = new StringBuilder("["); for (int i = 0; i < districts.length; i++) { data.append("{name:'").append(districts[i]).append("',value:").append(hospitalCount[i]).append("},"); } data.deleteCharAt(data.length() - 1); data.append("]"); String html = "<!DOCTYPE html>" + "<html>" + "<head>" + " <meta charset=\"utf-8\">" + " <title>大连市各区医院数量</title>" + " <script src=\"http://api.map.baidu.com/api?v=2.0&ak=" + ak + "\"></script>" + "</head>" + "<body style=\"margin:0;padding:0;\">" + " <div style=\"width:100%;height:100%;\" id=\"map\"></div>" + " <script type=\"text/javascript\">" + " var myChart = echarts.init(document.getElementById('map'));" + " var option = {" + " title: {" + " text: '大连市各区医院数量'," + " left: 'center'" + " }," + " tooltip: {" + " trigger: 'item'," + " formatter: '{b}: {c}'" + " }," + " bmap: {" + " center: ['121.614682', '38.914003']," + " zoom: 11," + " roam: true" + " }," + " series: [{" + " type: 'effectScatter'," + " coordinateSystem: 'bmap'," + " data: " + data + "," + " symbolSize: function (val) {" + " return val[2] / 10;" + " }," + " label: {" + " normal: {" + " formatter: '{b}'," + " position: 'right'," + " show: false" + " }," + " emphasis: {" + " show: true" + " }" + " }," + " itemStyle: {" + " normal: {" + " color: '#F06C00'" + " }" + " }" + " }]" + " };" + " myChart.setOption(option);" + " </script>" + "</body>" + "</html>"; System.out.println(html); } } ``` 说明: 1. 首先获取到百度地图API的AK(密钥),并设置要查询的城市和区域; 2. 循环查询每个区域中医院的数量; 3. 将查询结果转换为JSON格式的字符串,用于在地图上显示; 4. 生成HTML页面,使用ECharts来绘制地图,并将查询结果显示在地图上。 需要注意的是,该示例代码仅供参考,如需使用请根据自己的实际情况进行修改。另外,如需使用百度地图API,建议先查看官方文档以了解API的使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值