漏刻有时的博客_地图开发(5)

地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果

HTMl代码 <div id="container" class="container"></div> <script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script> <script src="//webapi.amap.com/loca?v=1.3.0&key=您申请的key值"></script> &l.

高德地图

jquery

5e

初始化

3d

原创 2021-07-30 16:32:52 801 阅读

地图开发实战案例:高德地图loca API 文字LabelsLayer效果

html代码<div id="container" class="container"></div><script src="https://webapi.amap.com/maps?v=1.4.15&plugin=Map3D&key=4d9a765939a2b76588a3341c2828d87c"></script><script src="https://webapi.amap.com/loca?v=1.3.1&ke.

3d

jquery

json

html

javascript

原创 2021-07-30 16:32:50 1141 阅读

百度地图开发(8):地图覆盖物实现纵横交错的交通网络

强制格式化百度标签样式.BMapLabel { background: none !important; border: none !important;}标签样式表.shu_txt { font-size: 10px; font-weight: bold; color: #333; text-shadow: 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px.

f5

2d

折线

标签样式

点击事件

原创 2021-07-30 16:32:48 138 阅读

天地图API接口地址批量转换为经纬度的解决方案

<table> <tr> <td>地址</td> <td>经纬度</td> </tr> <tbody id="content"></tbody></table>封装接口函数 function transAddress(address) { var keyWord = {"keyWord": address

html

i++

导出数据

封装

json

原创 2021-07-30 16:32:46 773 阅读

百度地图开发自定义信息窗口openInfoWindow样式的解决方案

1.InfoWindow的样式，百度是没用提供直接使用的样式表的，目前都是热心网友在实际开发中自己的经验和实战总结；2.百度提供了InfoBox富文本标签弹出框的接口，引入InfoBox.js，即可自定义样式或丰富的边框功能，但是鼠标单击下一个标注时，已经弹出的模态框是无法自动关闭；InfoWindow单击事件则是会即时展示现在单击的弹出模态框。3.InfoBox的样式表要理解，必须理解的组成部分；4.实现原理，就是CSS优先级和权重问题以及!important优先级；/*地图标题 infoW..

html

模态框

样式表

优先级

百度

原创 2021-07-30 16:32:45 7097 阅读 1收藏

高德地图进阶开发实战案例(4):计算骑行的距离和时间

var map = new AMap.Map("container", { center: [116.397559, 39.89621], zoom: 14 }); var ridingOption = { map: map, panel: "panel", policy: 1, hideMarkers: false, isOutline: true, outl.

json

数据查询

批量处理

点集

i++

原创 2021-07-30 16:32:43 996 阅读

高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案

多边形数据格式 //ajax数据输入格式; var data = [ { id: 1, value: "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508" }, { id: 2, value: "121.549996,29.809229.

数据格式

初始化

i++

封装

加载

原创 2021-07-30 16:32:41 2112 阅读

高德地图开发实战案例:实现信息弹出框的富文本展示效果

marker.content = "<p class='cardsBg'></p>";.cardsBg { width: 246px; height: 426px; background: url(../images/cards.png) no-repeat center center;}其中cards.png为整个弹出模态框的背景图片，做到这一步。仍旧会自带高德地图的样式，需要增加一个强制CSS样式表内容，来覆盖掉高德自带的样式。/*高德地图弹.

高德地图

css样式

弹出框

背景图片

模态框

原创 2021-07-30 16:32:40 687 阅读

百度地图开发实战案例:展示当前定位多少千米内的POI（兴趣点）

1.获取当前的自动定位经纬；2.在自动定位经纬度的点，添加10千米的圆形覆盖物；3.爬取POI兴趣点的关键词；10千米的圆形覆盖物 //半径10千米,可自行调整; var circle = new BMap.Circle(mPoint, 10000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 }); .

数据

覆盖物

地图

原创 2021-07-30 16:32:37 207 阅读

高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

var map = new AMap.Map('container', { center: [ 116.387175, 39.876405 ], zoom: 13 }); var southWest = new AMap.LngLat(116.356449, 39.859008) var northEast = new AMap.LngLat(116.417901, 39.893797) var bounds = new AMap...

缩放

地图

原创 2021-07-30 16:32:36 684 阅读

高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

外部文件的引入 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/jav.

高德地图

css

javascript

数据

加载

原创 2021-07-30 16:32:32 535 阅读 4评论

高德地图进阶开发实战案例(11):可拖拽驾车路线规划

外部文件引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>构建地图 var map, rou.

拖拽

javascript

加载

地图

原创 2021-07-30 16:32:30 708 阅读

街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案

删除通用样式表图片样式，成功解决：img { border: none; max-width: 100%;}Done!

样式表

echarts

原创 2021-07-30 16:30:56 190 阅读

Echarts地图版块移动位置的解决方案

在Echarts开发过程总，部分区块不能显示在一起。如美国的阿里阿斯加，需要在调用JSON注册地图时，调整对应的位置即可。 echarts.registerMap('USA', usaJson, { Alaska: { // 把阿拉斯加移到美国主大陆左下方 left: -131, top: 25, width: 15 }, Hawaii: { .

json

ico

开发过程

echarts

原创 2021-07-30 16:30:52 2298 阅读

echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案

默认的bmap.min.js是延续百度地图开启可点功能的，为了在echarts中关闭可点功能，需要修改bmap.min.js，具体文件见《bmap.min.js》需要添加如下MapOptions：, {enableMapClick: false}见：Done!

百度地图

echarts

原创 2021-07-30 16:30:51 1135 阅读

Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2

见解决方案《Echarts地图坐标geoCoordMap后台生成动态获取的解决方案》这样的做法，肯定不是一个追求完美程序猿的做法，为此纠结半月以后推出了比较满意的解决方案。实现原理： var data = [ {name: '漏刻有时数据可视化', value: 200} ]; var geoCoordMap = { '漏刻有时数据可视化': [121.554586, 29.813444] }; var convertD

解决方案

json

数据可视化

ajax

数组

原创 2021-07-30 16:30:12 534 阅读

Echarts报错 Cant read property getWidth of null的解决方案

在当前页面通过数据传递是正常的，但是在下钻的的时候，定时器仍在工作，导致找不到容器而报错。option.series[1].data = getArr(communityData0); clearInterval(isStop); isStop = setInterval(function () { getToolTip0(); option.series[1].data = getArr(co

解决方案

数据传递

javascript

当前页

跳转页面

原创 2021-07-30 16:30:08 1166 阅读

Echarts集成bmap的属性介绍

解决1个bug同时产生99个 bug,这就是程序猿为什么停不下来的原因。亟需解决的问题罗列：1.自定义区块的高亮显示问题（怀疑和经纬度格式有关系，待定）；2.区域遮罩重复到时黑屏的解决方案；3.13个区域，95个网格的经纬度拾取、标准格式转化；4....

百度地图

缩放

控件

百度

开发者

原创 2021-07-30 16:30:06 1960 阅读

Echarts与bmap结合使用百度地图系统自带的12个个性化模板mapStyle列表

bmap样式设置 bmap: { center: [113.844038, 22.907044],//默认中心点; zoom: 12,//缩放级别； roam: false,//是否缩放 mapStyle:{style:'hardedge'} },设置地图样式,将style改为模板下方的英文名称：`mapStyle:{style:‘hardedge’}系统自带12个样式，具体

缩放

echarts

原创 2021-07-30 16:24:17 2442 阅读

百度标注地图markers图片icon不正常显示的样式冲突解决方案

问题如上，基本上都是样式表冲突导致的。本例的解决方式如下：img { border: none; max-width: 100%;}删除max-width: 100%;即可

样式表

干货

原创 2021-07-30 16:24:15 504 阅读

php实现mysql计算经纬度坐标距离的筛选附近范围POI的解决方案

经测试，按照该公式和腾讯地图经纬度距离计算，精度基本上是匹配的。地球半径采用的是6378.137千米。 //选取小余500m的经纬度; public function getNear() { global $db, $res; dbc(); $city_lat = "29.800712"; $city_lng = "121.556758"; $sql = "select toilet_id,toilet_name,toilet_address,toilet_url,toilet_

sql

距离计算

腾讯地图

json

f5

原创 2021-07-30 16:18:29 272 阅读

百度地图和腾讯地图开发经纬度的位置是互换的

腾讯地图的坐标拾取：https://lbs.qq.com/tool/getpoint/index.html，坐标格式：29.844217,121.558228。百度地图的坐标拾取：http://api.map.baidu.com/lbsapi/getpoint/index.html，坐标格式：121.636018,29.86206。经纬度的位置是互换的，与之对应的程序开发API接口腾讯地图：var map = new qq.maps.Map(document.getElementById("co

腾讯地图

百度地图

html

初始化

程序开发

原创 2021-07-30 16:17:19 2596 阅读

百度地图异步加载开发系列(7):计算两个坐标点距离的API

//异步加载地图 function loadJScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://api.map.baidu.com/api?v=2.0&ak=&ak=11Z8uiP8kIz6AG0Vjiwzbc5f9I&callback=init';...

异步加载

放大缩小

javascript

干货

原创 2021-07-30 16:15:34 334 阅读

geojson乡镇拼接的说明

1.新建记事本文件，打开另存为.json文件，utf8编码；（或者直接使用IDE建立utf8的json文件）；2.复制一下内容：{ "type": "FeatureCollection", "features": []}3.筛选乡镇数据，如图：选择格式化的Formatted，点击复制4.将复制的乡镇边界放入对象中[]中，多个用英文的,隔开；{ "type": "FeatureCollection", "features": [{ "type": "Feature", "g

json

ide

另存为

键值

数据

原创 2021-07-30 16:15:24 218 阅读

geojson格式筛选及处理的解决方案

获取geojson文件 //获取geojson文件; $.getJSON('zj.json', function (data) { var d = []; for (var i = 0; i < data.features.length; i++) { //筛选条件; var str = data.features[i].properties.FULLNAMEPI; if (str.sea

json

字符串长度

字符串

导出文件

i++

原创 2021-07-30 16:15:22 343 阅读

php基于百度地图封装的对象类实现计算地图上两点间的距离和地理编码

封装对象class GeoHelper{ /* * @param int $lat1 * @param int $lon1 * @param int $lat2 * @param int $lon2

漏刻有时

百度地图

json

封装

地理编码

原创 2021-07-30 16:13:57 128 阅读

漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案

viewControl:{ autoRotate:true, minBeta:-3600, maxBeta:3600 },LOCKDATAV DONE!

数据可视化

原创 2021-07-30 16:13:36 687 阅读

地图开发实战案例:高德地图弧线连接线标注

HTML代码<div id="container"></div><script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script><script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script><script src="//a.amap.com/Loca/s.

高德地图

漏刻有时

地图可视化

jquery

i++

原创 2021-07-30 16:13:06 639 阅读

腾讯位置服务富文本标签实现行政区域标注点聚合的解决方案

腾讯位置服务实战开发体验。

腾讯位置服务

文本标签

封装

css

html

原创 2021-07-30 16:12:57 275 阅读

百度地图开发：自定义区划管理php后台数据管理的解决方案（layUI前端）

自定义区划管理，不需再受限于行政规划，可根据业务特点（如网点覆盖范围、消费者分布、内部人员分工等）自由划分区域块，实现企业信息的精细化格网管理。视频演示：百度地图自定义区划管理视频教程基于百度地图API开放接口；获取边界数据后，PHP后台数据管理；降低专业GIS软件门槛，将GIS优化为大众画图工具，让画区不再繁琐；支持多人在线协同编辑区域及业务数据，提升工作效率；.

css

自定义

数据

php

覆盖物

原创 2021-07-30 16:09:55 301 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

漏刻有时

地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果

地图开发实战案例:高德地图loca API 文字LabelsLayer效果

百度地图开发(8):地图覆盖物实现纵横交错的交通网络

天地图API接口地址批量转换为经纬度的解决方案

百度地图开发自定义信息窗口openInfoWindow样式的解决方案

高德地图进阶开发实战案例(4):计算骑行的距离和时间

高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案

高德地图开发实战案例:实现信息弹出框的富文本展示效果

百度地图开发实战案例:展示当前定位多少千米内的POI（兴趣点）

高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

高德地图进阶开发实战案例(11):可拖拽驾车路线规划

街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案

Echarts地图版块移动位置的解决方案

echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案

Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2

Echarts报错 Cant read property getWidth of null的解决方案

Echarts集成bmap的属性介绍

Echarts与bmap结合使用百度地图系统自带的12个个性化模板mapStyle列表

百度标注地图markers图片icon不正常显示的样式冲突解决方案

php实现mysql计算经纬度坐标距离的筛选附近范围POI的解决方案

百度地图和腾讯地图开发经纬度的位置是互换的

百度地图异步加载开发系列(7):计算两个坐标点距离的API

geojson乡镇拼接的说明

geojson格式筛选及处理的解决方案

php基于百度地图封装的对象类实现计算地图上两点间的距离和地理编码

漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案

地图开发实战案例:高德地图弧线连接线标注

腾讯位置服务富文本标签实现行政区域标注点聚合的解决方案

百度地图开发：自定义区划管理php后台数据管理的解决方案（layUI前端）

欢迎