2019年12月_何去何从2857

原创高德地图 Web JS API UI组件示例学习笔记（7）——拖拽选址

拖拽选址使用PositionPicker组件实现拖拽地图或者拖拽Marker选址。AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) { var map = new AMap.Map('container', { zoom: 16, // 关闭鼠标滚轮缩放地图 ...

2019-12-29 22:57:53 823

原创高德地图 Web JS API UI组件示例学习笔记（6）——行政区划浏览

事件处理DistrictExplorer下的各类事件的处理方法。本示例根据adcode绘制了相应区域，并监听了绘制要素的featureMouseout、featureMouseover、featureMousemove、featureClick、outsideClick等事件AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictE...

2019-12-29 18:08:44 1683 2

原创高德地图 Web JS API UI组件示例学习笔记（5）——轨迹展示

简单路径展示PathSimplifier的基本接口的使用方法。AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) { if (!PathSimplifier.supportCanvas) { alert('当前环境不支持 Canvas！'); re...

2019-12-29 17:11:07 1303 1

原创高德地图 Web JS API UI组件示例学习笔记（4）——基础控件

基础控件BasicControl（基础控件）包括：缩放控件(BasicControl.Zoom)，图层切换控件(BasicControl.LayerSwitcher)，交通图控件(BasicControl.Traffic)。AMapUI.loadUI(['control/BasicControl'], function(BasicControl) { //添加一个缩放控件 ...

2019-12-29 16:34:11 1231

原创高德地图 Web JS API UI组件示例学习笔记（3）——简单信息窗体

监听事件使用SimpleInfoWindow，本例展示如何给窗体内容绑定监听事件。本示例监听了infoWindow、infoTitle和infoBody三个事件AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) { var infoWindow = new SimpleInfoWindow...

2019-12-29 15:10:13 858

原创高德地图 Web JS API UI组件示例学习笔记（2）——矢量标注

自定义路径使用SvgMarker自定义路径。AMapUI.load(['lib/utils', 'ui/overlay/SvgMarker'], function (utils, SvgMarker) { if (!SvgMarker.supportSvg) { alert('当前环境不支持SVG'); } function MyCustom...

2019-12-29 11:55:53 411

原创高德地图 Web JS API UI组件示例学习笔记（1）——简单标注

自定义图标使用SimpleMarker，实现自定义图标的简单Marker的展示。自定义图标地址new SimpleMarker({ iconLabel: '1', //自定义图标地址 iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png', //设置基点偏移...

2019-12-29 11:23:19 782

原创高德地图 Web JS API示例学习笔记（15）——几何计算（距离/面积计算、关系判断）

距离/面积计算两点间距离使用LngLat.distance计算两个经纬度之间的直线距离。var p1 = m1.getPosition();var p2 = m2.getPosition();var distance = Math.round(p1.distance(p2));路径长度使用 AMap.GeometryUtil.distanceOfLine 计算某段路径的实际长度，返...

2019-12-26 23:01:28 2766 1

原创高德地图 Web JS API示例学习笔记（14）——其他LBS服务（轨迹纠偏、天气预报）

轨迹纠偏驾车轨迹纠偏GraspRoad的驾车轨迹纠偏接口可以将偏离道路的轨迹路径纠正到道路上 var graspRoad; var pathParam = [ {"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031}, {"x":116.478907,"y":39.998422...

2019-12-26 22:52:21 739

原创高德地图 Web JS API示例学习笔记（13）——搜索服务（输入提示、POI搜索、其他LBS服务）

输入提示获取输入提示数据使用 Autocomplete 获取输入提示信息。// 获取输入提示信息function autoInput(){var keywords = document.getElementById(“input”).value;AMap.plugin(‘AMap.Autocomplete’, function(){// 实例化Autocompletevar aut...

2019-12-26 22:23:17 1356

原创高德地图 Web JS API示例学习笔记（12）——Object3D 图形（通用接口、立体Mesh、线Line）

通用接口Object3D 的添加/移除对 Object3D 对象进行添加和移除的基本操作。// 添加 Object3DLayer 图层，用于添加 3DObject 对象var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);// 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中...

2019-12-26 21:54:22 5020 4

原创高德地图 Web JS API示例学习笔记（11）——覆盖物（矢量图形）

矢量图形折线的绘制和编辑使用AMap.Polyline和AMap.PolyEditor插件绘制和编辑折线var path = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ...

2019-12-25 21:16:43 1995 5

原创高德地图 Web JS API示例学习笔记（10）——覆盖物（地图控件、信息窗体）

地图控件地图控件的添加和移除给地图添加比例尺、缩放工具条、鹰眼等控件var scale = new AMap.Scale({ visible: false }), toolBar = new AMap.ToolBar({ visible: false }), overView = new AMap.OverView({ ...

2019-12-24 22:55:00 761

原创高德地图 Web JS API示例学习笔记（9）——覆盖物（点标记、覆盖物群组）

点标记点标记通过icon属性创建Marker，展示添加、修改、删除Marker的接口。// 实例化点标记 function addMarker() { marker = new AMap.Marker({ icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-de...

2019-12-24 22:25:15 2724 4

原创高德地图 Web JS API示例学习笔记（8）——覆盖物（通用）

通用根据覆盖物调整地图范围地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内，需要将地图调整到合适的缩放等级和中心点，我们可以调用setFitView()方法，以实现该效果。 // 创建两个点标记 var m1 = new AMap.Marker({ position: [116.49, 39.9] }); var m2 = new AMa...

2019-12-24 21:01:03 693

原创高德地图 Web JS API示例学习笔记（7）——图层（三方标准图层、自由数据图层）

三方标准图层卫星图+掩模组合使用简易行政区图-世界、卫星图、以及掩模功能，实现了只显示每个区域的地形图的效果。district = new AMap.DistrictSearch(opts); district.search('中国', function (status, result) { var bounds = result.districtList[0].boun...

2019-12-24 19:51:57 1918

原创高德地图 Web JS API示例学习笔记（6）——图层（图层通用接口、高德官方图层、简易行政区图）

图层通用接口图层添加与移除操作图层进行添加 setMap(map)、移除 setMap(null) 操作。var satellite = new AMap.TileLayer.Satellite({ map: map, }); //绑定按钮事件 function addLayer() { satellite.setMap(map);...

2019-12-23 22:54:35 2851 2

原创高德地图 Web JS API示例学习笔记（5）——事件系统（地图事件、覆盖物事件、其他事件）

地图事件地图加载完成事件监听Map的complete事件，可在该事件回调里添加基于地图的其它逻辑代码。map.on('complete', function () { document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();});地图移动事件绑定和解绑 Map 的 moves...

2019-12-23 21:59:39 1424

原创高德地图 Web JS API示例学习笔记（4）——坐标变换（坐标系变换、其他坐标转高德坐标）

坐标系转换使用了AMap.Geocoder插件，需要在script中声明。经纬度 <-> 地图容器像素坐标使用 lnglatTocontainer 和 containTolnglat 将经纬度坐标与地图容器像素坐标相互转换。经纬度 -> 地图容器像素坐标var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);var...

2019-12-23 16:35:17 1980

原创高德地图 Web JS API示例学习笔记（3）——地图（三维地图）

三维地图3D地图map = new AMap.Map('container', { resizeEnable: true, rotateEnable: true, pitchEnable: true, zoom: 17, pitch: 80, rotation: -15, viewMode: '3D', //开启3D视图,默认为关闭 buildi...

2019-12-19 23:18:51 1684 1

原创高德地图 Web JS API示例学习笔记（2）——地图（覆盖物与图层管理）

覆盖物与图层管理矢量点与矢量面// 构造点标记var marker = new AMap.Marker({ icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [116.405467, 39.907761]});// 构造矢量圆形var circle = new AMap....

2019-12-19 21:54:12 854

原创高德地图 Web JS API示例学习笔记（1）——地图（生命周期、地图属性）

生命周期地图的创建var map = new AMap.Map('container', { resizeEnable: true, //是否监控地图容器尺寸变化 zoom:11, //初始化地图层级 center: [116.397428, 39.90923] //初始化地图中心点});异步加载地图function onApiLoaded(){ var map ...

2019-12-19 20:41:50 2426

hequhecong10857的博客