vue项目中高德地图的注册及使用

2024-03-29 18:14:28

1.创建应用

点击进入高德地图个人开发的注册：https://lbs.amap.com/dev/id/personal

然后可以登录支付宝进行认证。

注册完毕之后，点击右上角的控制台

点击右上角的创建应用

创建好之后我们点击添加，我们以web端为例。选择之后提交。

2.地图使用

打开使用文档

接下来在vue项目中导入高德地图。

文档地址：https://developer.amap.com/api/javascript-api/guide/abc/quickstart

创建第一个地图：

//第一步 使用异步导入js文件的方式
  window.onLoad  = function(){
        var map = new AMap.Map('container');
  }
  var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
  var jsapi = doc.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);

紧接着在dom中创建一个id为container的元素，这是后地图就会根据你的ip自动定位到你的位置。

创建的同时还可以给地图设置中心点，级别，显示模式，自定义样式等属性。
如果不配置中心默认显示你当前的所在城市

 var map = new AMap.Map('container', {
        zoom:11,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D'//使用3D视图
    });

3.插件的使用

1.先在url参数后面加载插件

var url =`https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad&plugin=AMap.ToolBar`;

2.在onload函数里面调用插件

  window.onLoad = function () {
      var map = new AMap.Map("container",{
          zoom:11,
          center:[116.397428,39.90923],//中心点坐标
          viewMode:'3D'
      });
      //初始化toolbar插件  这是一个拖动地图的插件
      var toolbar = new AMap.ToolBar();
      //调用插件
      map.addControl(toolbar);
    };

4.点标记

点标记是用来标示某个位置点信息的一种地图要素。

// 创建一个 Marker 实例：
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});

// 将创建的点标记添加到已有的地图实例：
map.add(marker);
//如果是要标记多个点，则可以创建多个点实例，然后加入到数组当中，最后使用map.add([])的方式载入多个标记点。
// 移除已创建的 marker
map.remove(marker);

5.自定义标记内容

可以为标记添加icon实例也可以添加dom节点。设置了content会覆盖icon属性。

var content = '<div class="marker-route marker-marker-bus-from"></div>';

var marker = new AMap.Marker({
    content: "<div style='width=20px;height=20px;background:red;'>1</div>",,  // 自定义点标记覆盖物内容
    position:  [116.397428, 39.90923], // 基点位置
    offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});

map.add(marker);

会发现之前的标记物被自定义标记物给覆盖了。

6.使用阿里图标

将选择的图标添加入库，然后选择font class 生成下面的链接。

将链接添加入Link标签中。
在html标签中加入类名 iconfont 以及对应的图标类名iconxxx;

7.路线规划

路线规划时注意需要关联到map对象

 var driving = new AMap.Driving({
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME,
    map,
      })
  
  var points = [
    { keyword: '中北大学',city:'太原' },
    { keyword: '武宿机场',city:'太原' }
  ]
  
  driving.search(points, function (status, result) {
    // 未出错时，result即是对应的路线规划方案
  })

动态的修改关键字和城市形成路线。

码农公寓