vue中高德地图API的使用

时间:2021-1-8 作者:admin

一、注册账号

高德开放网址:lbs.amap.com/dev/id/choo…

二、创建应用

账号主体可能有不同的应用项目,比如你想开发DD出行、C操、大Z点评等,每个项目里面又分小程序、APPPC端等等不同的使用场景,每个场景都有一个key,这个key有点像ID、密码之类的,用来访问地图时可以知道哪个应用、接口访问了这个地图。

创建应用

添加key

  • 创建成功后账号主体跟项目都有了,key还没有,点击添加创建key,用于访问的时候提供身份认证.key的名称最好跟应用场景有关,方便后期管理

三、创建高德地图

  • 在首页可以看到有多种开发支持平台,点击进去可以看到不同应用场景的API文档

  • 可以在script引入,vue中可以进行异步加载JS,在mounted加载完毕以后进行异步加载,
  • 这里示范vue,key是刚刚申请的值
  • 注意:1.window在ssr/nuxt只有在mounted加载以后才出现,所以不能写在created
  • 2.doc需要补全document
<script>
export default {
  mounted() {
    //   页面加载完,开始异步引入高德地图
    //创建了一个回调函数,高德地图加载完毕会调用
    window.onLoad = function () {
      // 所有关于地图的逻辑全部都要写在这个回调里面
      // 保证高德地图加载完毕
      var map = new AMap.Map("container");
    };
    // key是申请的值
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
    //创建一个 script dom元素
    // doc需要补全document
    var jsapi = document.createElement("script");
    //设定script标签属性
    jsapi.charset = "utf-8";
    jsapi.src = url;
    //将API文件引入页面中,加载完毕以后会调用函数
    document.head.appendChild(jsapi);
  },
};
</script>

最后只要在页面添加一句代码

  • 构造参数中的container为准备阶段添加的地图容器的id:
<template>
  <div id="container"></div>
</template>
  • 如上已经实现了,只是因为没有宽高所以没有显示,给上宽高就可以了
<style lang="less" scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>

效果

四、简单配置

  • 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性:
  • 在container后面添加一个对象
  • zoom:缩放级别
  • center:指定数组以经纬度的方式设中心点,默认是当前位置
  • viewMode:3D视图
   var map = new AMap.Map("container", {
        zoom: 20, //级别
        center: [113.3245904, 23.1066805], //中心点坐标
        viewMode: "3D", //使用3D视图
      });

五、点标记

  • 官方文档中有很多标记的类型,这里示范点标记

  • 在回调函数里面创建Marker实例,添加经纬度和标题,可以分别注释看效果,如果是一起出现部分会发生互斥
   // 创建一个 Marker 实例:
      var marker = new AMap.Marker({
        //position: new AMap.LngLat(116.39, 39.9), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
        position: [113.3245904, 23.1066805], // 地理位置经纬度
        title: "广州塔", // 鼠标移上去时显示的内容
        offset: new AMap.Pixel(-100, -100), // 偏移量
        // 可以指定图标图片地址
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
        // 可以自定义标记点显示的内容,允许插入html字符串
        content: "<h1>广州塔Content</h1>",
      });
      // 将创建的点标记添加到已有的地图实例:
      map.add(marker);

效果

六、插件的使用

  • 高德中有很多功能,但不是每个都自带而是需要我们自己引入.这里示例一个导航条
  • 插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件,第一个参数是插件名,第二个是在plugin回调之后使用插件功能。
 // 插件的添加,第一个参数为插件名,第二个为回调函数
      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });

效果

七、完整代码参考

<template>
  <div id="container"></div>
</template>

<script>
export default {
  mounted() {
    //   页面加载完,开始异步引入高德地图
    //创建了一个回调函数,高德地图加载完毕会调用
    window.onLoad = function () {
      // 所有关于地图的逻辑全部都要写在这个回调里面
      // 保证高德地图加载完毕
      var map = new AMap.Map("container", {
        zoom: 20, //级别
        center: [113.3245904, 23.1066805], //中心点坐标
        viewMode: "3D", //使用3D视图
      });

      // 创建一个 Marker 实例:
      var marker = new AMap.Marker({
        //position: new AMap.LngLat(116.39, 39.9), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
        position: [113.3245904, 23.1066805], // 地理位置经纬度
        title: "广州塔", // 鼠标移上去时显示的内容
        offset: new AMap.Pixel(-100, -100), // 偏移量
        // 可以指定图标图片地址
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
        // 可以自定义标记点显示的内容,允许插入html字符串
        content: "<h1>广州塔Content</h1>",
      });

      // 插件的添加,第一个参数为插件名,第二个为回调函数
      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
      // 将创建的点标记添加到已有的地图实例:
      map.add(marker);
    };
    // key是申请的值
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
    //创建一个 script dom元素
    // doc需要补全document
    var jsapi = document.createElement("script");
    //设定script标签属性
    jsapi.charset = "utf-8";
    jsapi.src = url;
    //将API文件引入页面中,加载完毕以后会调用函数
    document.head.appendChild(jsapi);
  },
};
</script>

.<style lang="less" scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。