精华内容
下载资源
问答
  • 自定义点标记图标大小//初始化地图对象,加载地图var map = new AMap.Map("container", {resizeEnable: true,zoom:17});//添加点标记,并使用自己的iconnew AMap.Marker({map: map,position: [114.597599,37.605084]...
    自定义点标记图标大小

    //初始化地图对象,加载地图

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

    resizeEnable: true,

    zoom:17

    });

    //添加点标记,并使用自己的icon

    new AMap.Marker({

    map: map,

    position: [114.597599,37.605084],

    icon: new AMap.Icon({

    image: "marker1.png",

    size: new AMap.Size(52, 52, //图标大小

    imageSize: new AMap.Size(26,26)

    })

    });

    //添加点标记,并使用自己的icon

    new AMap.Marker({

    map: map,

    position: [114.597181,37.605161],

    icon: new AMap.Icon({

    image: "marker2.png",

    size: new AMap.Size(52, 52), //图标大小

    imageSize: new AMap.Size(26,26)

    })

    });

    展开全文
  • vue中使用高德地图自定义开发 用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。 起步-加载高德地图 // 进入 cd utils // 创建AMap.js文件 vim AMap.js AMap.js export default function MapLoader()...

    vue中使用高德地图自定义开发

    用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。

    起步-加载高德地图

    // 进入
    cd utils
    
    // 创建AMap.js文件
    vim AMap.js
    

    AMap.js

    export default function MapLoader() {
      return new Promise((resolve, reject) => {
        if (window.AMap) {
          resolve(window.AMap);
        } else {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.async = true;
          script.src =
            "https://webapi.amap.com/maps?v=1.4.15&key=你们自己申请的key&plugin=AMap.Geocoder&callback=initAMap";
          script.onerror = reject;
          document.head.appendChild(script);
        }
        window.initAMap = () => {
          resolve(window.AMap);
        };
      });
    }
    
    

    使用,在那个页面需要用高德地图,就在那个页面调用

    <script>
    import AMap from "@/utils/AMap";
    
    export default {
      name: "home",
      data() {
        return {
          map: null
        };
      },
      created() {
        window.title = "地图";
      },
      mounted() {
        this.initAMap();
      },
      methods: {
        async initAMap() {
          try {
            const res = await AMap();
            this.map = new res.Map("container", {
              resizeEnable: true, //是否监控地图容器尺寸变化
              zoom: 11, //初始化地图层级
              center: [116.397428, 39.90923] //初始化地图中心点
            });
          } catch (err) {
            console.error(err);
          }
        }
      }
    };
    </script>
    
    

    获取传入的宝箱位置

    
    // 别忘记在data中添加lng和lat
    created() {
        this.lng = this.$route.query.lng;
        this.lat = this.$route.query.lat;
    },
    

    考虑后面方便调用高德api,修改下代码

    <script>
    import AMap from "@/utils/AMap";
    
    export default {
      name: "home",
      data() {
        return {
          map: null,
          // 宝箱位置
          lng: null,
          lat: null,
          
          // 新增
          resMap: null
        };
      },
      created() {
        this.lng = this.$route.query.lng;
        this.lat = this.$route.query.lat;
      },
      mounted() {
        this.initAMap();
      },
      methods: {
        async initAMap() {
          try {
            // 修改
            this.resMap = await AMap();
            
            this.map = new this.resMap.Map("container", {
              resizeEnable: true, //是否监控地图容器尺寸变化
              zooms: [3, 19], //设置地图级别范围
              zoom: 14, //初始化地图层级
              zoomEnable: true, // 是否缩放
              scrollWheel: true, // 是否支持滚轮缩放
              dragEnable: true, // 是否支持鼠标拖拽平移
              jogEnable: true, // 是否支持缓动效果
              buildingAnimation: true, // 模块消失是否有动画效果
              center:  [this.lng, this.lat] //初始化地图中心点
            });
          } catch (err) {
            console.error(err);
          }
        }
      }
    };
    </script>
    
    

    添加点标记

    新建一个函数

    // 创建点标记
    addMarker() {
      this.marker = new this.resMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position:  [this.lng, this.lat],
        offset: new this.resMap.Pixel(-13, -30)
      });
    
      this.map.add(this.marker);
      this.map.setFitView();
    },
    
    

    在initAMap 函数中调用

    async initAMap() {
          try {
            ...
            this.addMarker()
          } catch (err) {
            console.error(err);
          }
        }
    
    

    添加矢量圆形

    新建一个函数

    // 构建矢量圆形
    addCircle() {
      return new this.resMap.Circle({
        center: new this.resMap.LngLat(`${this.lng}`, `${this.lat}`), // 圆心位置
        radius: 500, //半径,米
        strokeColor: "#F33", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        fillColor: "#ee2200", //填充颜色
        fillOpacity: 0.35 //填充透明度
      });
    },
    
    

    修改 addMarker 函数

    // 创建点标记
    addMarker() {
      ...
       
      // 记的在data里添加circle
      this.circle = this.addCircle();
    
      this.map.add([this.marker, this.circle]);
      this.map.setFitView();
    },
    
    

    添加一个图标

    新建一个函数

    // 创建一个icon
    addIcon() {
      return new this.resMap.Icon({
        // 图标尺寸
        size: new this.resMap.Size(40, 40),
        // 图标的取图地址
        image: require("@/assets/images/Treasure Box.png"),
        // 图标所用图片大小
        imageSize: new this.resMap.Size(40, 40)
        // 图标取图偏移量
        // imageOffset: new this.resMap.Pixel(0, 13)
      });
    },
    
    

    修改 addMarker 函数

     // 创建点标记
    addMarker() {
      this.marker = new this.resMap.Marker({
        icon: this.addIcon(),
        position: [this.lng, this.lat],
        offset: new this.resMap.Pixel(-20, -20)
      });
    
      this.circle = this.addCircle();
    
      this.map.add([this.marker, this.circle]);
      this.map.setFitView();
    },
    
    

    获取当前位置

    新建一个函数

    // 获取当前位置信息
    getCityInfo() {
      this.map.plugin("AMap.Geolocation", () => {
        var geolocation = new this.resMap.Geolocation({
          // 是否使用高精度定位,默认:true
          enableHighAccuracy: true,
          // 设置定位超时时间,默认:无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
          buttonOffset: new this.resMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB"
        });
    
        geolocation.getCurrentPosition();
        this.resMap.event.addListener(geolocation, "complete", this.onComplete);
        this.resMap.event.addListener(geolocation, "error", this.onError);
      });
    },
    
    // 获取定位结果
    onComplete(res) {
      console.log(res)
    },
    
    // 定位出错
    onError(err) {
      console.error(err, "--定位出错--");
    }
    
    
    

    计算宝箱和当前的距离

    新建一个函数

    // 计算两点之间的距离
    calculatingDistance(position) {
      const p1 = [this.lng, this.lat];
      // data中添加myPosition
      this.myPosition = [position.lng, position.lat];
      return this.resMap.GeometryUtil.distance(p1, this.myPosition);
    },
    
    

    修改 onComplete 函数

    onComplete(res) {
      // data中添加distance
      this.distance = this.calculatingDistance(res.position);
    },
    
    
    

    添加是否能挖宝逻辑

    当前位置处于宝箱500米范围内可以挖宝,同时显示 ‘我’ 标记

    computed: {
        // 是否在500米范围内
        is500() {
          return this.distance === undefined ||
            this.distance === null ||
            this.distance > 500
            ? false
            : true;
        }
    },
    watch: {
        is500(newValue) {
          if (newValue) {
            const marker = new this.resMap.Marker({
              icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
              position: this.myPosition,
              offset: new this.resMap.Pixel(-13, -30),
              title: "我"
            });
            this.map.add(marker);
            this.map.setFitView();
        
            // 设置鼠标划过点标记显示的文字提示
            marker.setTitle("我");
        
            // 设置label标签
            // label默认蓝框白底左上角显示,样式className为:amap-marker-label
            marker.setLabel({
              offset: new this.resMap.Pixel(0, 0), //设置文本标注偏移量
              content: "<div class='info'>我</div>", //设置文本标注内容
              direction: "bottom" //设置文本标注方位
            });
          }
        }
    },
    
    

    最后

    主要方便自己学习,也希望对别人有用,谢谢!!!

    展开全文
  • vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题,这时候对文件做提前引用...

    **

    vue框架中使用高德地图自定义icon问题

    **
    vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题,这时候对文件做提前引用就可以了!

    import icon from '../assets/icon_xm_2.png';
    var list = new AMap.Marker({
            position: new AMap.LngLat(116.39, 39.9), 
            icon:icon,
            title: '北京'
          })
    

    有用的话点个赞吧,记录平时出现的一些偏的问题

    展开全文
  • 标题创建自定义地图 vue中在index.html中引入地图key <script type="text/javascript" src="https://webapi.amap.com/maps? v=1.3&key=你申请的key"></script> 使用自定义样式 ...

    注册账号并申请 Key

    1. 首先,注册开发者账号,成为高德开放平台开发者
    2. 登陆之后,在进入「应用管理」 页面「创建新应用」
    3. 为应用添加 Key
      在这里插入图片描述

    标题创建自定义地图

    在这里插入图片描述

    vue中在index.html中引入地图key

    <script type="text/javascript" src="https://webapi.amap.com/maps?
    v=1.3&key=你申请的key"></script>
    

    在这里插入图片描述

    对应的地图组件中使用自定义样式

    在这里插入图片描述

    展开全文
  • 高德地图自定义地图样式

    千次阅读 2019-10-15 16:29:14
    高德地图开放平台官网的jsAPI中提供了自定义地图的方法: 其中官方提供了10个主题来给开发者们使用 但10个主题并不能满足所有场景,所以官方还提供了自定义地图样式的方法: (1)进入自定义页面,点击创建地图...
  • Android 高德地图自定义地图

    千次阅读 2019-07-10 11:34:56
    现在很多调用高德地图的app,都使用自定义地图,比较个性。现在进入主题。 高德给出的开发文档https://lbs.amap.com/api/android-sdk/guide/create-map/custom/,参照做下去,发现离线加载给出的方法都已过时。...
  • 高德地图自定义弹窗内容

    千次阅读 2020-05-17 21:41:50
    使用vue2.x来实现高德地图自定义弹窗内容,可以通过一个按钮来切换不同的样式风格,即改变弹窗内容样式。 分析 高德地图官网为开发者提供了自定义弹窗内容的例子,见这里 。官方提供的方式是Dom操作,即createElement...
  • 在学习高德地图JS API的过程中,发现高德地图提供的点、线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas、svg、甚至dom,这里我用的是svg,多说无益,上代码。...
  • 此文讲的是使用高德地图自定义气泡,并且点击自定义气泡后对应的 MAMapView 地图对象能够接收到点击的通知事件 didAnnotationViewCalloutTapped,气泡也在点击后被移除。 效果: 添加自定义气泡 定义弹出的气泡...
  • 使用高德地图自定义marker、infowindow

    千次阅读 2018-12-27 10:41:40
     使用自定义的MyInfoWindow: public class MyInfoWindow implements AMap.InfoWindowAdapter { private Context context; private LatLng latLng; private TextView userText; private String userInfo; ...
  • 本例使用content实现在高德地图自定义覆盖物,即自定义marker。先看如下效果: 标题 在地图上显示三种颜色的marker:绿色,紫色,橙色。当点击其中的一个marker时,该Marker颜色变为蓝色,size变大,并旋转45度...
  • 高德地图自定义annotation图标

    千次阅读 2017-02-02 23:32:00
    在写lbs相关的app时,肯定会在地图上标记一些坐标点,有时候也需要根据需求来改变标记的外观,这篇文章就是记录了我使用高德地图sdk的添加自定义样式点标记时遇到的问题以及解决方法。我使用的开发语言是swift。 我...
  • 高德地图 自定义路径

    千次阅读 2019-05-06 16:16:45
    官网给的案例:https://github.com/amap-demo/android-drive-route 看这两个文件就明白怎么回事了, 使用方法:
  • 最近使用了一下高德地图使用期间将出现的问题记录一下。文中出现不对的地方,悉听各路大神指正。2018年11月23日15:59:461.首先我们初始化map控制对象aMap。if (aMap ==null) {aMap =mMapView.getMap();}2.设置...
  • 1.上图所指示的坐标当时是用墨卡托坐标,要将其转成高德地图坐标表示的经纬度的形式,才能在高德地图中表示出来所指示的地点。 墨卡尔托坐标表示形式:12738037.307083402,3562717.500125364 就是上面这个坐标进行...
  • 高德地图自定义单位Marker有介绍,但自定义多个使用的方法不是一样,并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题,导致信息窗口显示不正常。这个坑到处找资料,花了整整2天才...
  • 高德地图自定义单位Marker有介绍,但自定义多个使用的方法不是一样,并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题,导致信息窗口显示不正常。这个坑到处找资料,花了整整2天才全部...
  • 高德地图自定义marker的图片定位的问题 高德地图上自带的marker的图片样式有点单一,想要用自己的图片作为marker点标记,但是定位就会出现位置不对的问题,在点击的坐标位置加一个circle更加的明显,会出现marker在...
  • Android 高德地图自定义线路规划选择方案之后按照方案进行导航 因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航。所以我这边线路规划和导航界面都是根据高德地图那边给的api进行自定义...
  • vue[高德地图自定义InfoWindow弹出框中@click事件问题]

    千次阅读 热门讨论 2020-05-27 17:05:39
    vue[高德地图使用自定义InfoWindow事件]
  • 高德地图自定义单位Marker有介绍,但自定义多个使用的方法不是一样,并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题,导致信息窗口显示不正常。这个坑到处找资料,花了整整2天才...
  • Marker marker = aMap.addMarker(new MarkerOptions() .anchor(0.5f, 0.5f) ...加载的是网络图片 因为之前有人说自定义的marker设置icon时不能使用网络的图片 自己写的xml里可以设置各种样式的Marker
  • 高德地图自定义单位Marker有介绍,但自定义多个使用的方法不是一样,并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题,导致信息窗口显示不正常。这个坑到处找资料,花了整整2天才...
  • 之前做了一个图片处理的app,把本地图片的经纬度存到... 本功能使用的是高德地图的API,是在高德“点聚合效果”demo的基础上改的(高德官网提供的聚合点demo下载),下面的代码里很多类用的都是这个demo上的,如果...
  • 此文重点是在地图上标点,...如果你的需求不要求特别显示,那么可以使用bm-marker代码大致如下: 上面的代码中position里面的值是经纬度。有了经纬度来能够标上点。ak是你申请的百度api的keycenter是城市中心如果你...
  • 第一步:首先引入地图就不多说了 第二步:将自定义的小图标放入static img文件夹中 第三步:使用 mapInit() { this.map = new AMap.Map("mapContent", { resizeEnable: true, zoom: 4 }); let icon = new AMap....
  • 10月4日,景区官微发文称,与高德地图因错误导航多次沟通无果,建议自驾游客前往景区时,使用其他导航平台,以免对行程带来误导及不便。10月5日,高德地图发布关于青城山景区导航问题的情况说明,称到达点已经从售票...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 301
精华内容 120
关键字:

高德地图自定义地图使用