程序员经验分享-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

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

  • 如何使用 iOS 可达性

    我正在开发一个使用网络的 iPhone 应用程序 iPhone 通过 HTTP 请求与我的服务器通信 并且应该可以在 WiFi 和 3G 上运行 我目前使用NSURLConnection initWithRequest向我的服务器发送异步请

  • 无法验证包：721772200.itmsp

    我写这篇文章是因为我有一个严重的问题 我在cartoonsmart 网站上购买了Commander Cool 游戏 然而 一个严重的问题发生了 iTune Connect 验证无法接受该申请 我尝试从两个不同的开发者帐户发布它 但错误仍然发

  • 使用 Protobuf-net，我收到有关 List 未知线路类型的异常

    我已经开始将 Unity iOS 游戏转换为使用 Protobuf net 保存状态 看起来一切正常 直到我将此实例变量添加到GameState ProtoMember 10 public List

  • mgwt - 以编程方式改变方向

    是否可以在 gwt mgwt 应用程序中更改强制执行特定的屏幕方向 可以说我希望用户始终以横向模式使用应用程序 这取决于 是作为phonegap应用程序 而不是在浏览器内部 如果您作为 Web 应用程序运行 则不需要t get any co

  • Admob 广告无法快速显示

    您好 我正在尝试将 admob 广告添加到已使用 swift 上传到应用商店的应用程序中 我在 admob 中制作了一个应用程序并复制了 appid 和广告 id 并显示了各自的横幅广告和插页式广告 这里的问题是当我写这行时 request

  • 如何正确创建迦太基 cartfile？

    我正在研究购物车文件 迫不及待地想 简单地创建一个购物车文件 就像所有说明所说的那样 只是 如何 简单地 创建一个 Cartfile 我创建了一个纯文本文档 将其命名为 cartfile 并在其中复制了一些依赖项 Ran carthage

  • 使用 NSString 进行 UTF8 解码

    我是 Objective C 新手 尝试使用以下示例将格式错误的 UTF8 编码 NSString 转换为格式良好的字符串苹果文档 http developer apple com library mac documentation Coc

  • .showsPhysics 内存泄漏

    我最近花了 5 个小时尝试调试 Spritekit 应用程序中的内存泄漏 应用程序启动后 我注意到内存使用量略有上升 我花了 5 个小时中的 3 个小时挖掘参考资料 了解强与弱的关系ARC https developer apple com

  • 为什么performSegueWithIdentifier在viewDidLoad中不起作用？

    我试图在视图控制器上调用 viewDidLoad 后立即触发故事板转场 Segue 附加了一个标识符 当从链接到按钮或其他控件的方法内部调用时 它可以正常工作 但它在 viewDidLoad 内部不起作用 它只是默默地失败了 viewDid

  • 如何从 SDK 实现每个会话的 Google Places 自动完成功能？

    是否可以从 Android 和 iOS 应用程序的 place sdk 实现基于会话的自动完成 根据 6 月 11 日生效的新 Google 地图框架定价 对自动完成的请求可以分为基于击键 会话的请求 我找不到描述实施步骤的文档 除了这个参

  • Objective-C UILabel 作为超链接

    我正在尝试做一个UILabel一个链接UIWebView 我怎样才能做一个UILabel作为超链接 您可以使用 UITapGestureRecognizer 它将实现与您想要的类似的功能 UILabel myLabel UILabel al

  • iOS 中 NSDecimalNumber 的小数分隔符错误

    我尝试通过以下方式输出具有正确的小数分隔符的十进制数的描述 NSString strValue 9 94300 NSDecimalNumber decimalNumber NSDecimalNumber decimalNumberWithS

  • 从按钮执行 Segue 时应用程序冻结

    我的故事板中有一个按钮 它呈现一个带有模式序列的视图控制器 每次按下此按钮时 应用程序都会冻结 没有崩溃 也没有错误消息 prepareForSegue被调用 所有应该存在的视图控制器都在代码中prepareForSegue 但它们不会出现

  • 用户验证 Facebook 后未调用应用程序打开 Url 方法

    我已将 ios 应用程序中的 facebook 升级到 3 0 并使用提供的代码https developers facebook com docs howtos login with facebook using ios sdk http

  • AVAssetExportSession 无法导出从 iCloud 下载的视频

    我正在尝试创建从用户相册中选择的视频的缩小版本 输出的最大尺寸为 720p 因此 在检索视频时 我使用 mediumQualityFormat as the deliveryMode 如果用户设备中不存在原始视频或其中等质量版本 这会导致

  • 访问目标 c 中的类方法。使用 self 还是类名？

    我正在学习 iOS 编程 并且对以下有关关键字 self 的使用的代码感到困惑 据我了解 self就像Java的this 它指的是当前实例 当我想调用类方法时 通常的方式应该是这样 PlayingCard validSuits 但是侵入实例

  • 在 UIWebView 中播放 Facebook 视频

    有谁知道如何在 Facebook 上播放视频UIWebView 我的应用程序将视频上 传到 Facebook 并检索视频的网址 我想将此网址嵌入到UIWebView播放 我已经为 youtube 解决了这个问题 但没有为 Facebook

  • 在实例化对象之前是否可以检查故事板中是否存在标识符？

    在我的代码中我有这一行 但我想知道是否有办法检查是否 一些控制器 在我将它与 一起使用之前就存在实例化ViewControllerWithIdentifier 方法 如果标识符不存在 则应用程序崩溃 如果没有好的方法 这并不是一个大问题 我

  • 叠加 SKScene 未显示

    我正在尝试将 SKScene 覆盖在 SCNScene 上 当我在模拟器和 iPhone6 上运行我的应用程序时 overlayScene SKScene 按预期显示 但是当我尝试在 iPhone5 上运行它 尝试了 2 个不同的设备 时

  • iOS：如何知道 reloadData() 已完成其任务？

    我想滚动到给定索引 self boldRowPath 但是当我调试时scrollToRow之前执行reloadData 如何知道reloadData已完成 func getAllTimeEvent self arrAllTimeEvent

随机推荐

  • 【报错】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

热门标签