基于高德地图API渲染首页

1.引入高德地图js库

  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key="></script>

key=你在高德地图官方网站申请的key。

高德开放平台 | 高德地图API

进入控制台，博主这里已经注册好了，没有注册好的自行注册，

注意注册需要实名。博主三年前注册的当时没有要实名注册。

2.配置地图底色

GeoHUB

只是博主配置的底图。

有喜欢的可以使用。

js使用代码如下

Map.setMapStyle("amap://styles/c78a92b94cdeb9c4dbd0c7e7d42618dd");

3.开发

//湖北省地市州边界图 需要的朋友去我主页资源下载https://download.csdn.net/download/qq_26695613/86859743
import hubeiJson from '../../../assets/JS/hubei'var Map = new AMap.Map('container', {zoom:8,center: [112.008497, 30.998136],pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度viewMode:this.switchValue?'2D':'3D' // 地图模式可选值：3D
});
Map.setMapStyle("amap://styles/c78a92b94cdeb9c4dbd0c7e7d42618dd");var polygons=[];
hubeiJson.features.forEach(item => {var polygon = new AMap.Polygon({map: Map,strokeWeight: 2,path:item.geometry.coordinates,fillOpacity: 0.1,fillColor: '#CCF3FF',strokeColor: '#1E9FFF'
});polygons.push(polygon);
});
Map.add(polygons);var content='' + '<div class="custom-content-marker dh">' +
'   <img width=30px src="http://127.0.0.1:8100/Content/images/Guidepa/省控点离线.png">' + '<div class="wx"><img alt='+item.realName+' title='+item.realName+' width=15px style="position: absolute;top: 8px;right: -10px;" src="http://127.0.0.1:8100/Content/images/Guidepa/维修.png"></div>' +
'</div>';var marker = new AMap.Marker({// position: [item.gLongitude, item.gLatitude],position: wgs84_to_gcj02(item.gLongitude,item.gLatitude),// 将 html 传给 contentcontent: content,// 以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-13, -15)
});// 将点标记添加到地图上
marker.setTitle(item.sStation);
Map.add(marker);
marker.on('click', function(){... 弹窗
})

基于高德地图API渲染首页相关推荐

python 乡镇轮廓高德_基于高德地图api和Python的区县地理边界坐标提取
在工作中,经常想用到类似于地热图的方式进行数据展示,奈何工作环境是内网,无法在线进行地图关联,没办法,只好自己想办法上网找边界坐标. 查了很多文档和费心以后,最终发现高德地图api的方法和方式最简单, ...
HTML5 新特性 - 地理定位（基于高德地图API）
定位的基础与原理 IP定位运营商基站定位 GPS定位地理定位的实现地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权. 获取地理定位的相关代码如下: let ...
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...
基于高德地图api,vue实现步行导航
vue代码 <template><div><van-nav-bartitle="导航"left-text="返回"left-arr ...
python交通调查数据处理_GitHub - unlimitbladeworks/traffic-monitor: 基于高德地图的交通数据分析...
traffic-monitor(基于高德地图的交通数据分析) 设计需求在于每天上班早高峰期,每次都提前出门,虽然有地图可以实时查看路况,但是再过一阵时间就会异常的堵车如果通过数据监控分析每天指定路段 ...
Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
使用高德地图API实现历史轨迹查询
欢迎大家关注我的公众号,有问题可以及时和我交流. 使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果创作背景因为对历史轨迹查询比较好奇,所以使用 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
java高德地图api开发平台_【高德地图API】从零开始学高德JS API（一）地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...

基于高德地图API渲染首页

基于高德地图API渲染首页相关推荐

最新文章

热门文章