精华内容
下载资源
问答
  • 在高德地图上添加自定义Marker
    2021-01-14 16:21:12

    public void showCityAtMap(MapView mapView) {

    if (aMap == null) {

    aMap = mapView.getMap();

    }

    aMap.clear();

    aMap.moveCamera(CameraUpdateFactory.zoomTo(5));

    ArrayList allCity = (ArrayList) DataSupport.findAll(WeatherDataInfo.class);

    for (WeatherDataInfo weatherDataInfo : allCity) {

    LatLng latLng = new LatLng(weatherDataInfo.getLat(), weatherDataInfo.getLon());

    aMap.addMarker(new MarkerOptions().position(latLng).draggable(false).snippet(""+weatherDataInfo.getPosition())

    .icon(BitmapDescriptorFactory.fromView(

    getInfoWindow(weatherDataInfo.getName(),

    weatherDataInfo.getTmp(),

    weatherDataInfo.getIcon()))));

    }

    aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {

    @Override

    public boolean onMarkerClick(Marker marker) {

    listener.onWindowClick(Integer.parseInt(marker.getSnippet()));

    return true;

    }

    });

    }

    主要是利用addMarker方法添加一个Marker,但Marker的样式为自定义的View:

    public View getInfoWindow(String city, String temp, int icon) {

    View view = View.inflate(BaseUtils.getContext(), R.layout.marker_info_layout, null);

    TextView tvCity = (TextView) view.findViewById(R.id.tv_city);

    TextView tvTemp = (TextView) view.findViewById(R.id.tv_temp);

    ImageView ivIcon = (ImageView) view.findViewById(R.id.iv_icon);

    tvCity.setText(city);

    tvTemp.setText(temp);

    ivIcon.setImageResource(icon);

    return view;

    }

    布局:

    android:layout_width="100dp"

    android:layout_height="100dp"

    android:background="@drawable/custom_info_bubble"

    android:orientation="vertical">

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="2"

    android:gravity="center">

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/tv_city"

    android:textSize="20sp"

    android:textColor="@color/colorAccent"

    />

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:orientation="horizontal"

    android:gravity="center">

    android:layout_width="30dp"

    android:layout_height="30dp"

    android:id="@+id/iv_icon"

    />

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/tv_temp"

    android:textColor="@android:color/black"

    android:textSize="26sp"/>

    更多相关内容
  • 高德地图搜索获取坐标转换地图添加标记 记得换成自己申请的KEY值。
  • 高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并main.js中...key: ‘********************',//自己在高德地图平台的key值 plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scal
  • 源代码提供高德地图风场效果,下载解压后,本地启动静态服务,即可看风场特效;本demo地图地图是基于高德地图,同时支持百度地图、天地图等作为底图
  • JS基于高德地图定位城市闪烁特效是一款基于高德api地图的点位闪烁效果,利用canvas自定义图层实现闪烁效果。
  • 然后vue项目中输入命令下载高德地图插件 npm i @amap/amap-jsapi-loader --save 然后你想要使用的组件中导入 import AMapLoader from "@amap/amap-jsapi-loader"; 创建一个盛放地图的盒子 <div ...

    首先需要自己去注册高德地图开发者平台的账号获取key码,

    然后在vue项目中输入命令下载高德地图插件

    npm i @amap/amap-jsapi-loader --save

    然后在你想要使用的组件中导入

     import AMapLoader from "@amap/amap-jsapi-loader";

    创建一个盛放地图的盒子

     <div class="map-box" id="container">
    
     </div>

    然后在methods里使用,并且需要在mounted中初始化地图插件

         methods:{
                initMap() {
                    var that=this
                    AMapLoader.load({
                        "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
                        "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                        "plugins": [],           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
                        "AMapUI": {             // 是否加载 AMapUI,缺省不加载
                            "version": '1.1',   // AMapUI 缺省 1.1
                            "plugins":[],       // 需要加载的 AMapUI ui插件
                        }
                    }).then(AMap => {
                            this.map = new AMap.Map("container", {
                                //设置地图显示的缩放级别
                                zoom: 15,
                                // 是否允许鼠标拖拽
                                dragEnable: true,
                                // 鼠标滚轮放大缩小
                                scrollWheel: true,
                                // 双击放大缩小
                                doubleClickZoom: true,
                                // 键盘控制发达缩小移动旋转
                                keyboardEnable: false,
                                // 手势控制
                                touchZoom: false,
                                center: [114.614989, 38.025327],//设置地图中心点坐标
                            }),
                            // //构建信息窗体中显示的内容
                            //     this.info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>"),
                            // this.infoWindow = new AMap.InfoWindow({
                            //         content: this.info.join("")  //使用默认信息窗体框样式,显示信息内容
                            //     }),
                            //     this.infoWindow.open(this.map, this.map.getCenter())
                        //在指定位置打开信息窗体
                                (function () {
                                    // console.log(this)
                            //构建信息窗体中显示的内容
                            var info = [];
                            info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>");
                            let infoWindow = new AMap.InfoWindow({
                                content: info.join("")  //使用默认信息窗体框样式,显示信息内容
                            });
                            infoWindow.open(that.map, that.map.getCenter());
                        })()
                        }).catch(e => {
                            console.log(e);
                        });
                }
            },
            mounted(){
                this.initMap()
            }

    注:这里盛放地图容器盒子的id(container)需要和地图实例中的名字想对应

     this.map = new AMap.Map("container", {
    
        }

    如果需要加信息窗体,例如:

    就需要在then回调中加 

    
        function openInfo() {
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
            info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
            info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
            info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");
    
            infoWindow = new AMap.InfoWindow({
                content: info.join("")  //使用默认信息窗体框样式,显示信息内容
            });
    
            infoWindow.open(map, map.getCenter());
        }

    这里我写了一个例子:

    initMap() {
                    var that=this
                    AMapLoader.load({
                        "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
                        "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                        "plugins": [],           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
                        "AMapUI": {             // 是否加载 AMapUI,缺省不加载
                            "version": '1.1',   // AMapUI 缺省 1.1
                            "plugins":[],       // 需要加载的 AMapUI ui插件
                        }
                    }).then(AMap => {
                            this.map = new AMap.Map("container", {
                                //设置地图显示的缩放级别
                                zoom: 15,
                                // 是否允许鼠标拖拽
                                dragEnable: true,
                                // 鼠标滚轮放大缩小
                                scrollWheel: true,
                                // 双击放大缩小
                                doubleClickZoom: true,
                                // 键盘控制发达缩小移动旋转
                                keyboardEnable: false,
                                // 手势控制
                                touchZoom: false,
                                center: [114.614989, 38.025327],//设置地图中心点坐标
                            }),
                            // 1.直接写
                            //     this.info.push("<p class='input-item'>地址 :河北省</p></div></div>"),
                            // this.infoWindow = new AMap.InfoWindow({
                            //         content: this.info.join("")  //使用默认信息窗体框样式,显示信息内容
                            //     }),
                            //     this.infoWindow.open(this.map, this.map.getCenter())
                        //2.封装成函数写
                                (function () {
                                    // console.log(this)
                            //构建信息窗体中显示的内容
                            var info = [];
                            info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>");
                            let infoWindow = new AMap.InfoWindow({
                                content: info.join("")  //使用默认信息窗体框样式,显示信息内容
                            });
                            infoWindow.open(that.map, that.map.getCenter());
                        })()
                        }).catch(e => {
                            console.log(e);
                        });
                }
            

    这样就可以了

    注:如果封装成函数来写,需要注意this指向,这里函数中this不指向vue组件了,需要借助另一个变量来赋值操作,也就是把this赋值给that,这时候我们就把that当做this来用,从而使得that指向vue组件

    var that=this

    展开全文
  • 高德地图POI数据爬取

    2020-12-21 20:08:35
    首先,需要在高德地图开放平台注册账号,并且申请web服务的AK密钥。注册账号登陆后点击右角的控制台 ->应用管理 -> 创建应用 -> 添加新key,注意选择web 服务,就得到了一个可以使用web服务的key密钥。一定是Web...
  • 使用高德地图js-api实现绘制圆形、矩形、多边形;右键可删除可自定义菜单;
  • 准备工作注册Key首先,登陆之后,进入「应用管理」 页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key,等会要用,以后可能也会用,一定要...body后面引入高德地图的...

    准备工作

    注册Key

    3cfdce53c02d75872e339e9cb939cc52.png

    首先,

    登陆之后,在进入「应用管理」 页面「创建新应用」

    为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

    记住这个Key,等会要用,以后可能也会用,一定要记住。

    页面上的准备

    新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。

    给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。

    在body后面引入高德地图的js。

    最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。(去获取标记点的经纬度)

    【注】 高德地图Api入门指南

    #container{

    width: 500px;

    height: 500px;

    }

    //初始化地图插件

    window.onload = function(){

    var map = new AMap.Map("container", {

    zoom: 15, //设置地图显示的缩放级别

    center: [116.44927, 39.9584] //设置地图中心点坐标

    });

    // 创建一个 Marker 实例:(标记点)

    var marker = new AMap.Marker({

    position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]

    title: "位置标题"

    });

    // 将创建的点标记添加到已有的地图实例:

    map.add(marker);

    }

    好了,现在你的页面上已经出现了高德地图

    32f552d83aad366e21191ec9188da267.png

    展开全文
  • 主要介绍了vue异步加载高德地图的实现,详细的介绍了异步加载的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 里面包含了elementui结合高德地图的定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。
  • gmap高德地图基础添加了高德混合地图,保证可用
  • Android Kotlin开发高德地图,仿微信 发送位置功能源码,高德定位、地图、搜索SDK、动画、添加标记的使用
  • 然后在高德地图官网登录你注册的账号并且去控制台—–>应用管理—–>添加新key  获取到自己的key值  获取key的具体方法的官网地址 2、通过解压得到.Jar文件并放到libs文件中,手动添加到依赖库中(右键Add—-)...
  • 显示省份、市、区统计、 热点图、具体数据点 需要在线访问高德地图 访问的时候, 请用 http 形式访问, 文件系统可能导致 json 测试数据无法访问
  • 高德地图自定义地图apidemo,地图样式,标注样式,自定义窗体
  • // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else ...
  • 高德 JS api 总结简介此次是对最近...Vue 中引入高德地图 apinpm 包引入npm i amap-js -S复制代码优点:开箱即用,使用简单script 脚本引入 index.html 中加入链接,链接后跟申请的 key。type="text/javascript"...

    高德 JS api 总结

    简介

    此次是对最近使用高德地图的JS api做一个总结,关于各个类可以实现什么效果,以及如何使用。之后会总结一些常见问题的优化思路和解决办法。

    Vue 中引入高德地图 api

    npm 包引入

    npm i amap-js -S

    复制代码

    优点:开箱即用,使用简单

    script 脚本引入

    在 index.html 中加入链接,链接后跟申请的 key。

    src="https://webapi.amap.com/maps?v=1.4.15&key=[key]"

    >

    复制代码

    在 vue.config.js 中配置全局名,在代码中可以通过 vue 实例直接调用。

    module.exports = {

    configureWebpack: {

    externals: {

    AMap: "AMap",

    AMapUI: "AMapUI"

    }

    };

    }

    复制代码

    优点:定制化程度高,可以按需组合功能。

    高德地图基础概念

    地图

    地图是高德地图 api 的承载,所有的 api 都需要由一个地图来接收,同一个界面可以有多个地图。

    复制代码

    this.map = new this.AMap.Map("container", {

    resizeEnable: true, // 是否监控地图容器尺寸变化

    zoom: 15, // 初始化地图层级

    zooms: [5, 18], //地图允许缩放的层级

    center: [117.96, 40.96], // 初始化地图中心点

    mapStyle: "amap://styles/407154d906b9cd83d4e5e57df8b27cec" //自定义地图发布的样式

    });

    复制代码

    图层

    图层是覆盖在地图上的一个个层,每一层具有不同的功能,层与层之间拥有层级关系。

    官方图层

    类名说明是否插件AMap.TileLayer切片图层类否

    AMap.TileLayer.Satellite卫星图层类,继承自 TileLayer否

    AMap.TileLayer.RoadNet路网图层类,继承自 TileLayer否

    AMap.TileLayer.Traffic实时交通图层类,继承自 TileLayer否

    AMap.Buildings楼块图层,独立显示矢量楼块数据的一种图层否

    AMap.MassMarks图海量麻点图层类否

    AMap.Heatmap热力图插件是

    AMap.LayerGroup图层集合,用来包装其它图层类的实例并对集合做批量操作否

    AMap.LabelsLayer标注图层,用于添加 LabelMarker 类型标注否

    // 卫星

    let satellite = new AMap.TileLayer.Satellite();

    // 路网

    let road = new AMap.TileLayer.RoadNet();

    this.map.setLayers([satellite, road]);

    复制代码

    自建图层

    类名说明是否插件AMap.TileLayer.Flexible自定义切片图层,即可灵活自定义切片内容的栅格图层,继承自 AMap.TileLayer否

    AMap.ImageLayer图片图层,可将图片叠加在地图的对应区域否

    AMap.CanvasLayerCanvas 图层,可将 Canvas 叠加在地图的对应区域否

    AMap.VideoLayerVideo 图层,可将视频叠加在地图的对应区域否

    AMap.CustomLayer完全自定义绘制的图层否

    let imageLayer = new AMap.ImageLayer({

    url:

    "http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",

    bounds: new AMap.Bounds([116.327911, 39.939229], [116.342659, 39.946275])

    });

    复制代码

    WMS/WMTS

    类名描述是否插件AMap.TileLayer.WMS用于加载 OGC 标准的 WMS 图层否

    AMap.TileLayer.WMTS用于加载 OGC 标准的 WMTS 图层否

    var wms = new AMap.TileLayer.WMTS({

    url:

    "https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/",

    blend: false,

    tileSize: 256,

    params: {

    Layer: "0",

    Version: "1.0.0",

    Format: "image/png",

    TileMatrixSet: "EPSG:3857"

    }

    });

    复制代码

    覆盖物

    覆盖物是绘制在地图上的一些矢量图形或图标。

    Marker 类

    点标记,图标可以自定义。

    Text 类

    文本标注,可以添加自定义样式的文本。

    Polyline 类

    折线

    Polygon 类

    多边形

    BezierCurve 类

    贝塞尔曲线

    Circle 类

    圆形

    OverlayGroup 类

    OverlayGroup 是覆盖物管理类,可以用此类批量管理覆盖物的显示隐藏及其他操作。

    信息窗体

    信息窗体是根据地图位置偏移显示在界面上的一个 HTML 节点。

    this.infoWindow = new this.AMap.InfoWindow({

    isCustom: true,

    autoMove: true,

    closeWhenClickMap: true,

    anchor: "top-left",

    content: document.getElementById("infoWindow"),

    offset: new this.AMap.Pixel(22, 22)

    });

    复制代码

    地图控件

    地图控件是官方封装的一些用来控制地图操作的组件。

    控件名称说明是否插件AMap.ControlBar组合了旋转、倾斜、复位、缩放在内的地图控件,在 3D 地图模式下会显示(自 V1.4.0 版本新增)是

    AMap.MapType地图类型切换插件,用来切换固定的几个常用图层是

    AMap.OverView地图鹰眼插件,默认在地图右下角显示缩略图是

    AMap.Scale地图比例尺插件是

    AMap.ToolBar地图工具条插件,可以用来控制地图的缩放和平移是

    this.map.plugin(["AMap.ControlBar"], () => {

    let controlBar = new AMap.ControlBar(Options);

    this.map.addControl(controlBar);

    });

    复制代码

    工具

    插件名称说明是否插件AMap.MouseTool鼠标工具插件是

    AMap.CircleEditor圆编辑插件,用于编辑 AMap.Circle 对象是

    AMap.PolyEditor折线、多边形编辑插件是

    AMap.BezierCurveEditor贝瑟尔曲线编辑插件是

    AMap.EllipseEditor椭圆编辑插件是

    AMap.RectangleEditor矩形编辑插件是

    AMap.Hotspot地图热点是

    AMap.MarkerClusterer点聚合插件是

    AMap.RangingTool距离量测插件是

    事件监听

    使用on( eventName, handler, context)和off( eventName, handler, context)方法对地图及地图元素进行监听。

    eventName:事件名称(必填)

    handler:事件回调函数(必填)

    context:事件回调中的上下文(可选,缺省时,handler 中 this 为调用 on 方法的对象本身,否则 this 指向 context 引用的对象)

    注意:多次绑定时,当 eventName、handler 函数对象、context 对象有任意一个不一样就会再次绑定。

    展开全文
  • 首先需要在高德开放平台注册一个用户,并申请一个key和你的项目相关联,地址:https://lbs.amap.com/登录后进入:控制台→应用管理→我的应用→创建新应用→添加key(底下附上流程)    应用名称随便填写,符合...
  • vue项目引入高德地图

    2018-06-19 11:19:31
    vue项目中,添加高德地图。对开发地图的开发人员有一定帮助
  • 使用高德地图显示多个标注点 有 弹跳效果 可自定义 title
  • 高德地图定位、周边搜索、位置弹框、添加覆盖物等功能,可以自定义定位,添加覆盖物,覆盖物点击事件等,自定义定位按钮
  • 高德地图上添加marker,给每一个marker添加点击事件。高德地图上添加marker,给每一个marker添加点击事件。javascriptvar watch = []$.ajax({type: 'GET',dataType: 'jsonp',url:url +'你的url地址',error: function...
  • 运用静态地图功能,可快速生成一张地图图片,可以指定显示的地图区域、图片大小、以及在地图上添加覆盖物,如标签、标注、折线、多边形。 可用于快速生成一张个性化涂鸦的静态地图用于查看和分享。 (此图片来源于...
  • Kotlin开发高德地图,仿微信 发送位置功能源码,高德定位、地图、搜索SDK、动画、添加标记的使用
  •  vuecli public文件夹中的index.html添加导入 JS API 的入口脚本标签 <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta ...
  • 这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域。以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当...
  • 百度纠偏 高德纠偏 地图纠偏 地图偏移
  • 1.index.html引入高德地图JSAPI [removed][removed] 2.地图dom <div id=container xss=removed></div> 3.js实现 export default { data() {}, methods:{ initMap(){ let map = new AMap.Map('

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,503
精华内容 4,601
关键字:

怎么在高德地图上添加