地图api | 易学教程

100行代码实现两点线路地图

阅读更多关于 100行代码实现两点线路地图

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>高德地图api初体验</title> <style type="text/css"> html, body, #container { width: 100%; height: 100%; } </style> <style type="text/css"> #panel { position: fixed; background-color: white; max-height: 90%; overflow-y: auto; top: 10px; right: 10px; width: 280px; } #panel .amap-call { background-color: #009cf9; border-top-left-radius: 4px; border-top-right-radius: 4px; } #panel .amap-lib-driving { border

高德地图API使用笔记

阅读更多关于高德地图API使用笔记

最近公司项目需要用到高德地图绘制路径回放功能，在这里做下笔记记录一下。首先需要加载地图库文件 // key对应为你申请的key <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=cb7979ff006d672830bb59a4a394d2c9'></script> 　　绘制站点首先初始化地图dom对象 var setting = { resizeEnable: true, //是否监控地图容器尺寸变化 center: [116.397428, 39.90923], //初始化地图中心点 zoom: 11,//初始化地图层级 zooms: [3, 20], // 可见层级范围 mapStyle: "", // 地图皮肤 } // 合并参数 setting = Object.assign(setting, option); // 初始化地图 this.mapObj = new global.AMap.Map(elm,setting); 通过circleMarker来创建站点。 var circleMarker = new AMap.CircleMarker({ center:center, // 站点坐标，定位圆点位置 radius:5+Math.random()*10,//3D视图下

Android 高德地图API学习笔记（2）

阅读更多关于 Android 高德地图API学习笔记（2）

高德地图API支持绘制覆盖物，覆盖物API类似于JS开源地图绘制库Leaflet，如果有相关经验可以轻松上手。支持的覆盖物：折线（Polyline）多边形（Polygon）圆（Circle）图片覆盖层（GroundOverlay）标记（Marker）弧形（Arc）如何创建覆盖物： a.创建覆盖物选项对象（XXOptions eg:Polyline） b.设置覆盖物选项 c.创建覆盖物对象 (new XX(xxOptions) eg:new Polyline(new PolylineOptions())) e.追加至地图 (amap.addXXX eg:amap.addPolyline(xxx) ) http://lbs.amap.com/api/android-sdk/guide/overlay/ //折线选项对象 PolylineOptions polyline=new PolylineOptions() .geodesic(false) .color(Color.rgb(0, 51, 255)) .setDottedLine(true) .width(5L); for(Test data:datas){ //经纬度对象 LatLng tmp=new LatLng(data.getLat(), data.getLon()); //创建Mark 并使用自定义图片

高德地图笔记

阅读更多关于高德地图笔记

1.加点（多个） var map = new AMap.Map("container", { resizeEnable: true, zoom: 4 }); var markers = []; //province见Demo引用的JS文件 for (var i = 0; i < provinces.length; i += 1) { var marker; var nposition = provinces[i].center.split(","); console.log("nposition》》》》",nposition); if(nposition[0]=="26.571257"){ return false; } if (nposition.length == 2) { if (provinces[i].type == 0) { var icon = new AMap.Icon({ image: "https://vdata.amap.com/icons/b18/1/2.png", size: new AMap.Size(24, 24) }); marker = new AMap.Marker({ icon: icon, position: nposition, offset: new AMap.Pixel(-12, -12), zIndex: 101, title:

高德地图笔记(持续更新)

阅读更多关于高德地图笔记(持续更新)

此笔记大多数内容来源于高德地图api网站. 1. 向mainifest中添加<meta>时注意添加在<application>,这个低级错误曾经犯过 0.0 2. 添加如下权限: <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />

高德地图API笔记

阅读更多关于高德地图API笔记

一、图层类 1 二、调用高德地图 2 三、点标注 2 3.1使用自定义 maker 标注 2 3.2 Icon参数详情 3 3.3在地图上画圆 3 四、区域搜索 4 4.1 画边界函数 5 五、高德地图服务插件 6 5.1地点搜素 7 六、海量点 8 一、图层类 var layerName = new AMap.TileLayer.类名 layerName.setMap(map); 类名说明 TileLayer 切片图层类 TileLayer.Satellite 卫星图层类，继承自 TileLayer TileLayer.RoadNet 路网图层类，继承自 TileLayer TileLayer.Traffic 实时交通图层类，继承自 TileLayer Buildings 3D楼块图层类 IndoorMap 室内地图图层类 ImageLayer 图片图层类 MassMarks 海量麻点图层类例如 MassMarks var mass = new AMap.MassMarks({ anchor:new AMap.Pixel(5,5), url: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', //必填参数，图标的地址 cursor: ’ pointer ’ , size: new AMap.Size(5, 7

JS-高德地图开发笔记

阅读更多关于 JS-高德地图开发笔记

一.申请key（略）二.创建地图 1. 显示地图 1）显示以某点为中心的地图 var map = new AMap.Map('container', { resizeEnable: true, zoom:11, center: [116.397428, 39.90923] //地点的坐标 }); 2）加载地图javascript api a. 从页面直接引入： <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> （使用htmls方式加载地图） <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> b 异步加载javascript api <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script> <script> function init(){ var map = new AMap.Map('container', { //注意 container为选定的div显示容器这限制了地图的区域 center

高德地图API使用笔记 -- bootstrap样式与高德地图兼容的问题

阅读更多关于高德地图API使用笔记 -- bootstrap样式与高德地图兼容的问题

问题：引入 bootstrap.min.css 后，高德地图无法显示，去掉即可正常显示。解决办法：去官网下载了最新的版本 v3.3.5 ，引入后高德地图正常显示。过程：问题发现后，查找原因是一个地图容器的DIV高度和宽度都是 0px 引起的地图切片不能正常显示。于是各种网上搜，说bootstrap中文网（http://www.bootcss.com/）有解决方法，我比较笨一直没找到。正好在网上看到一个帖子的回答里面说用官网的css覆盖也还是没有解决问题。于是，想到去官网下载最新的css，覆盖后成功解决问题。来源： CSDN 作者： project11 链接： https://blog.csdn.net/project11/article/details/49507119

百度地图案例

阅读更多关于百度地图案例

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } #allmap { height: 700px; width: 100%; } #r-result, #r-result table { width: 100%; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的Ak"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>百度地图案例</title> </head> <body> <div id="allmap"></div> <div id="driving_way"> <select>

高德地图POI采集（URL-API）

阅读更多关于高德地图POI采集（URL-API）

新手从零学起，成功跑通，记一下，技术大神们多多指点。 ———————————————— 1-概述 POI：兴趣点。对于百度、高德等电子地图来说，一个POI是地图上的一个店铺/商场/小区等等。这次要解决的问题是统计全国范围内某行业实体店的数量。采用的方法就是从地图软件上搜索行业关键词，抓取返回结果的办法。 2-途径经过对比，选取的平台是高德地图开放平台 https://lbs.amap.com/api （同类型的还有百度地图，但是经测试BUG太多，放弃）平台提供多种接口，选择了最小白的途径，URL API。举个例子，我要搜索北京东城区 https://restapi.amap.com/v3/place/text?keywords= 宠物&city=& 东城区&output= json&offset= 50&page= 1&key= ********* 我把key隐掉了，这样抠搜是因为每个开发者每天能请求的次数是有限的，大家可以去https://lbs.amap.com自己注册申请一个试一下。（这里是每个开发者的调用限制说明，https://lbs.amap.com/api/webservice/guide/tools/flowlevel）直接访问拼接好的URL，就能获取到Json格式的POI数据。我这里采用的是地点搜索功能，每个地点支持最多1000条以下的信息搜集

订阅地图api