程序员经验分享-hwhale

百度地图+谷歌地图 勾画 行政区块边界

2023-11-07

最近公司做项目，需要用在谷歌地图上勾勒出搜索的行政区块的轮廓。

于是在找各种资料......最后好像是有末尾CSDN的网友提供了思路，具体看正文。


效果如下



先贴代码

[html]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>demo.html</title>  
  5.   
  6.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.         <meta http-equiv="description" content="this is my page">  
  8.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.   
  10.     </head>  
  11.     <!--google-->  
  12.     <script type="text/javascript"  
  13.         src="https://maps.google.com/maps/api/js?sensor=false"></script>  
  14.     <!--baidu-->  
  15.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  16.   
  17.   
  18.     <body onload="initialize();">  
  19.         <div id="map_canvas" style="width: 800px; height: 600px"></div>  
  20.   
  21.         <div id="show_x"></div>  
  22.         <!--显示X坐标-->  
  23.         <div id="show_y"></div>  
  24.         <!--显示Y坐标-->  
  25.         <div id="zoom"></div>  
  26.         <!--显示缩放级别-->  
  27.         <div id="message"></div>  
  28.   
  29.         输入省、直辖市或县名称：  
  30.         <input type="text" id="districtName" style="width: 80px" value="重庆市">  
  31.         <input type="button" onclick="getBoundary()" value="获取轮廓线">  
  32.     </body>  
  33.   
  34.     <script type="text/javascript">  
  35.     var map;  
  36.     function initialize() {  
  37.         var myLatLng = new google.maps.LatLng(37,  
  38.                 104);  
  39.         var myOptions = {  
  40.             zoom : 4,  
  41.             center : myLatLng,  
  42.             mapTypeId : google.maps.MapTypeId.TERRAIN  
  43.         };  
  44.   
  45.         var bermudaTriangle;  
  46.   
  47.         map = new google.maps.Map(document.getElementById("map_canvas"),  
  48.                 myOptions);  
  49.   
  50.     }  
  51.   
  52.     function test() {  
  53.   
  54.     }  
  55.   
  56.     function getBoundary() {  
  57.         var bdary = new BMap.Boundary();  
  58.         var name = document.getElementById("districtName").value;  
  59.         //多边形定义  
  60.           
  61.         bdary.get(name, function(rs) {  
  62.             points = rs; //获取行政区域  
  63.             var rslength = rs.boundaries.length;  
  64.             var top=0;//大  
  65.             var bottom=0;//小  
  66.             var left=0;//小  
  67.             var right=0;//大  
  68.             for (i = 0; i < rslength; i++) {  
  69.                 var triangleCoords = [];  
  70.                 var temp = rs.boundaries[i];  
  71.                 var latLngs = temp.split(";");  
  72.                 for (j = 1; j < latLngs.length - 1; j++) {  
  73.                     var postion = latLngs[j].indexOf(",");  
  74.                     var lat = parseFloat(latLngs[j].substr(0, postion));//经度  
  75.                     var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度  
  76.                     //加入经纬度  
  77.                     triangleCoords.push(new google.maps.LatLng(lng, lat));  
  78.                     //活动最大，最小经纬度。计算地图中心点  
  79.                     if(j==1&&top==0&&bottom==0&&left==0&&right==0){  
  80.                         top=lng;  
  81.                         bottom=lng;  
  82.                         left=lat;  
  83.                         right=lat;  
  84.                     }else{  
  85.                         if(lng>top){  
  86.                             top=lng;  
  87.                         }  
  88.                         if(lng<bottom){  
  89.                             bottom=lng;  
  90.                         }  
  91.                         if(lat>right){  
  92.                             right=lat;  
  93.                         }  
  94.                         if(lat<left){  
  95.                             left=lat;  
  96.                         }  
  97.                     }  
  98.                       
  99.                 }  
  100.                 bermudaTriangle = new google.maps.Polygon({  
  101.                     paths : triangleCoords,  
  102.                     strokeColor : "#FF0000",  
  103.                     strokeOpacity : 0.8,  
  104.                     strokeWeight : 2,  
  105.                     fillColor : "#FF0000",  
  106.                     fillOpacity : 0.35  
  107.                 });  
  108.                 bermudaTriangle.setMap(map);  
  109.             }  
  110.             map.setCenter(new google.maps.LatLng(bottom+((top-bottom)/2),left+((right-left)/2)));  
  111.             map.setZoom(7);  
  112.   
  113.         });  
  114.   
  115.     }  
  116. </script>  
  117. </html>  

接着一步一步的看。

第一步：导入谷歌和百度的JS库

[html]  view plain copy
  1. <!--google-->  
  2.     <script type="text/javascript"  
  3.         src="https://maps.google.com/maps/api/js?sensor=false"></script>  
  4.     <!--baidu-->  
  5.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  

第二步：从百度地图拿到坐标点。其中的rs变量内存的就是坐标集合。

[html]  view plain copy
  1. var bdary = new BMap.Boundary();  
  2.         var name = document.getElementById("districtName").value;  
  3.         //多边形定义  
  4.           
  5.         bdary.get(name, function(rs) {  
  6.             points = rs; //获取行政区域  
第三步：解析整理。

[html]  view plain copy
  1. points = rs; //获取行政区域  
  2.             var rslength = rs.boundaries.length;  
  3.             var top=0;//大  
  4.             var bottom=0;//小  
  5.             var left=0;//小  
  6.             var right=0;//大  
  7.             for (i = 0; i < rslength; i++) {  
  8.                 var triangleCoords = [];  
  9.                 var temp = rs.boundaries[i];  
  10.                 var latLngs = temp.split(";");  
  11.                 for (j = 1; j < latLngs.length - 1; j++) {  
  12.                     var postion = latLngs[j].indexOf(",");  
  13.                     var lat = parseFloat(latLngs[j].substr(0, postion));//经度  
  14.                     var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度  

第四部：用整理过的数据在谷歌地图上绘制多边形。（坐标有一点偏差）

[css]  view plain copy
  1. bermudaTriangle = new google.maps.Polygon({  
  2.     paths : triangleCoords,  
  3.     strokeColor : "#FF0000",  
  4.     strokeOpacity : 0.8,  
  5.     strokeWeight : 2,  
  6.     fillColor : "#FF0000",  
  7.     fillOpacity : 0.35  
  8. });  
  9. bermudaTriangle.setMap(map);  

第五步：计算中心点坐标。

[javascript]  view plain copy
  1. //加入经纬度  
  2.                     triangleCoords.push(new google.maps.LatLng(lng, lat));  
  3.                     //活动最大，最小经纬度。计算地图中心点  
  4.                     if(j==1&&top==0&&bottom==0&&left==0&&right==0){  
  5.                         top=lng;  
  6.                         bottom=lng;  
  7.                         left=lat;  
  8.                         right=lat;  
  9.                     }else{  
  10.                         if(lng>top){  
  11.                             top=lng;  
  12.                         }  
  13.                         if(lng<bottom){  
  14.                             bottom=lng;  
  15.                         }  
  16.                         if(lat>right){  
  17.                             right=lat;  
  18.                         }  
  19.                         if(lat<left){  
  20.                             left=lat;  
  21.                         }  
  22.                     }  

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

webgis

ios

iPad

百度地图+谷歌地图 勾画 行政区块边界 的相关文章

随机推荐

  • 【报错】onMounted is called when there is no active component instance too be associated with.

    文章目录 报错 分析 解决 报错 onMounted is called when there is no active component instance too be associated with Lifecycle injecti

  • 统计分析：聚类分析（详细讲解）

    聚类分析是研究 物以类聚 的一种方法 人类认识世界往往首先将被认识的对象进行分类 早起人们主要靠经验和专业知识实现分类 但随着生产技术和社会科学的发展 对分类学的要求越来越高 靠经验和专业知识来分类越来越难 于是数学这一有力工具被引入分类学

  • textarea接受后台数据

    在jsp页面使用EL接受后台数据到textarea

  • mybatis-plus-generator生成实体类时添加jdbcType

    效果 需要修改的文件 1 基本思路 1 使用变量 useJdbcType 控制是否需要生成jdbcType 2 生成时拼接相关字段信息 2 步骤 2 1重写TableField 添加jdbcType属性 在com baomidou myba

  • rollup怎么处理.node文件

    Rollup 是一个 JavaScript 模块打包器 它可以将多个模块合并成单个文件 它可以帮助你将你的代码打包成可以在浏览器中运行的文件 要使用 Rollup 处理 node 文件 你需要使用一个 Rollup 插件 如 rollup

  • 数据挖掘基础

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 数据挖掘定义及用途 1 定义 2 用途 二 决策树 1 理论知识 1 概念 2 算法一般过程 C4 5为例 2 小结 三 关联规则 1 概述 2 关联分析

  • MySQL之多表关联删除/更新

    日常测试的时候 需要连接其他表而删除某些脏数据 按照正常的查询的写法 会这样写删除语句 DELETE from order where id in SELECT o id from order o LEFT JOIN customer c

  • minicom键盘失效，不能输入问题

    转 http blog sina com cn s blog 5d0e8d0d01015svy html 这个问题可以参考secureCRT的时候遇到的问题 问题与minicom的一样 RTS 请求发送 CTS 清除发送 默认情况下mini

  • vue3配置proxy解决跨域

    跨域问题是前端开发中较常见的问题 因为javascript的浏览器会支持同源策略 如果域名 协议 端口任意不同就会产生跨域 如果非同源 那么在请求数据时 浏览器会在控制台中报一个异常 提示拒绝访问 错误信息如下 Access to XMLH

  • Linux常用命令整理（适合初学）

    关机 重启操作 帮助文档 1 帮助命令 1 1 help help cd 查看cd命令的帮助信息

  • 服务器推送消息SSE,HTTP 服务器消息推送之SSE

    HTTP 服务器推送也称 HTTP 流 是一种客户端 服务器通讯模式 它将信息从 HTTP 服务器异步推送到客户端 而无需客户端请求 如今的 web 和 app 中 愈来愈多的场景使用这种通讯模式 好比实时的消息提醒 IM在线聊天 多人文档

  • 将字符串转化为整数

    Java内部实现 param s the code String containing the integer representation to be parsed param radix the radix to be used whi

  • unet测试评估metric脚本

    全部复制的paddleseg的代码转torch import argparse import logging import os import numpy as np import torch import torch nn functio

  • 第十三届蓝桥杯 2022年省赛真题（Java 大学C组）

    蓝桥杯 2022年省赛真题 Java 大学C组 目录 试题 A 排列字母 试题 B 特殊时间 试题 C 纸张尺寸 试题 D 求和 试题 E 矩形拼接 试题 F 选数异或 试题 G GCD 试题 H 青蛙过河 试题 I 因数平方和 试题 J

  • 43 openEuler搭建Apache服务器-配置文件说明和管理模块

    文章目录 43 openEuler搭建Apache服务器 配置文件说明和管理模块 43 1 配置文件说明 43 2 管理模块和SSL 43 2 1 概述 43 2 2 加载模块 43 2 3 SSL介绍 43 openEuler搭建Apac

  • 浅谈(Java)JUC线程池ScheduledThreadPoolExecutor

    博主介绍 程序员悟啦 乌拉 个人仓库 码云 座右铭 懒 对一个人的毁灭性有多大 早起的重要性就多大 免责声明 文章由博主原创 部分文章整理于网络 仅供学习和知识分享 相遇是缘 既然来了就拎着小板凳 坐下来一起唠会儿 如果在文中有所收获 请别

  • 《银行法律法规》二、银行业务——3、结算、代理、托管业务

    第三章 结算 代理及托管业务 第一节 支付结算业务 考点1 国内结算 支付结算 是指结算客户之间由于商品交易 劳务供应等经济活动而产生的债权债务关系 通过银行实现资金转移而完成的结算过程 支付结算是银行的一项基础性服务 支付结算应遵循恪守信

  • 《北京市政务服务领域区块链应用创新蓝皮书（第一版）》正式发布

    为加快推动区块链技术和产业创新发展 北京市政务服务管理局 北京市科委 北京市经济和信息化局组织相关单位抓紧推进政务服务领域区块链应用建设 取得阶段性成果 在此基础上 北京市区块链工作专班专家组编制了 北京市政务服务领域区块链应用创新蓝皮书

  • SDC设计约束——IO延时约束

    原文链接 https juejin cn post 7123461617299226660 约束命令 set input delay clock CLK max 2 0 get ports IN set input delay clock

  • 百度地图+谷歌地图 勾画 行政区块边界

    最近公司做项目 需要用在谷歌地图上勾勒出搜索的行政区块的轮廓 于是在找各种资料 最后好像是有末尾CSDN的网友提供了思路 具体看正文 效果如下 先贴代码 html view plain copy

热门标签