使用高德地图JS API 开发一些常见使用方法(急救包)(1)

5 篇文章 0 订阅

使用高德地图JS API 开发常见使用(1):

使用高德地图JS API前 ,先准备创建应用,👉 如何创建 ;👉控制台

一.引入加载方式 👉传送门

1. script 标签加载 JS API 脚本
// 同步加载
<script type="text/javascript">
  window._AMapSecurityConfig = {
    serviceHost: "你的代理服务器域名或地址/_AMapService",
    // 条件不够就直接明文暴露 (不建议)
    securityJsCode: '你的密钥',
  };
</script>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"
></script>
<script type="text/javascript">
  //地图初始化应该在地图容器div已经添加到DOM之后
  var map = new AMap.Map("container", {
    zoom: 12,
  });
</script>

// 异步看官方 https://lbs.amap.com/api/javascript-api-v2/guide/abc/load

提示:渲染高德地图 注意 在所挂载的DOM要有宽高 、且在DOM渲染后 加载地图。

安全密钥加载通过 服务器代发 和 明文方式 (很不建议)。

实在没办法可以进行代码加密 : 👉传送门-亲测可行-建议在生产环境调试看看可行


2. JS API Loader加载(npm、loader.js)

可靠推荐、可全局自由封装AMapLoader

2-1.script 标签加载 Loader

```javascript
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key,首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI,缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca, 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>
2-2.NPM 安装 Loader
// 安装loader包
npm i @amap/amap-jsapi-loader --save
<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

二、常用api 、指令

1.点标记 Marker

地图开发常用的Marker点标记:普通Marker、海量点;

// 普通点标记Marker
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
  offset: new AMap.Pixel(-10, -10),
  icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
  title: "北京",
});
map.add(marker);
}
2.设置层级、中心点 setZoomAndCenter
map.setZoom(12);
var position = [116.681212,39.852698]; 
map.setCenter(position );
map.setZoomAndCenter(12, position);
3.自动缩放视野 setFitView
map.setFitView()
4.平移 panTo

官方案例有过渡效果 但实际使用没有, 不影响使用

map.panTo([116.405467, 39.907761]);
5.地图清除 map.destroy();
//解绑地图的点击事件
map.off("click", clickHandler);
//销毁地图,并清空地图容器
map.destroy();
//地图对象赋值为null
map = null
//清除地图容器的 DOM 元素
document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id

三、隐藏一些样式

1.解决初始加载地图可能出现的白屏闪烁
::v-deep  .amap-container {
    background-color: transparent !important;
}
2.隐藏logo,版权标识
::v-deep .amap-logo{
    display: none !important;
}
::v-deep .amap-copyright{
  display: none !important;
}

四、地图自定义样式

可使用官方提供的自定义地图(省时省力)map.setMapStyle(“amap://styles/whitesmoke”);

// 地图创建之后使用
var map = new AMap.Map("container", {
  zoom: 10, //设置地图的缩放级别
});
map.setMapStyle("amap://styles/whitesmoke");

可自行创建定制地图 👉传送门
创建定制地图的可分享复制给其他账号
提示:使用自定义地图id需要配合该账号下key、密钥才能使用,。

map.setMapStyle("amap://styles/你的自定义地图id");

更多👉还是需要看官方文档

下一篇👉: 使用高德地图JS API 开发——普通点标记Marker

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
高德地图API是一款功能强大的地图服务,它提供了多种功能和接口供开发使用使用高德地图API需要经过以下几个步骤: 1. 首先,你需要申请一个高德地图开发者账号,并创建一个应用。你可以访问高德地图开放平台的官方网站,在那里你可以找到相关的注册和创建应用的步骤。 2. 在创建应用后,你会得到一个API Key,这是你使用高德地图API的权限凭证。在使用API时,你需要在请求中携带这个API Key。 3. 接下来,你可以根据你的需求选择合适的API接口进行开发高德地图API提供了地图显示、地理编码、逆地理编码、路径规划、导航等一系列功能的接口。 4. 根据你选择的接口,你需要按照API文档中的要求构造API请求,并将API Key携带在请求中。 5. 发送请求后,你会收到API的响应数据。根据响应数据的格式和内容,你可以进行相应的处理和展示。 以下是一些常用的高德地图API接口和功能: - 地理编码:将地址转换为经纬度坐标,可以使用 Geocoding API 实现。 - 逆地理编码:将经纬度坐标转换为具体地址,可以使用 Regeocoding API 实现。 - 路径规划:根据起点和终点计算出最优路径,可以使用 Directions API 实现。 - 导航:提供步行、驾车、骑行等导航功能,可以使用 Navigation API 实现。 - 地图显示:在网页或移动应用中显示地图,可以使用 JavaScript API 或 Android/iOS SDK 实现。 希望以上信息能帮助你初步了解如何使用高德地图API。如果你有其他相关问题,请随时提问。 相关问题: 1. 高德地图API有哪些常用的功能? 2. 如何在网页中使用高德地图? 3. 高德地图API的请求参数有哪些?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值