目录
使用高德地图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");