项目实战第二十记
- 写在前面
- 1. 高德地图官网
- 2. 开发文档
- 3. 集成高德地图
- 3.1 在public文件夹下创建config.js
- 3.2 index.html（在项目启动文件中引入外部的js）
- 3.3 点标记（用点标记当前位置）
- 3.4 信息窗体（点击当前位置，弹出当前位置信息介绍）
- 3.5 路线规划（行车轨迹）
- 3.6 定位（定位所在城市位置）
- 总结
- 写在最后
写在前面
本篇主要讲解系统集成高德地图的简单应用
1. 高德地图官网
https://lbs.amap.com/
a, 在控制台下创建应用
b, 添加key（后面开发需要用上key和秘钥）
2. 开发文档
开发文档说明地址
获取某个地方的经纬度链接
3. 集成高德地图
3.1 在public文件夹下创建config.js
如下图所示：
var gloableConfig = {
"key": "21e6448a80093b98bbe496326xxx", // 高德地图的key（配合秘钥使用的key）开发环境使用
"secretKey": "d41253368f29e52ce9eaed3d6xxx", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
};
3.2 index.html（在项目启动文件中引入外部的js）
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./static/config.js"></script>
<script type="text/javascript">
// 高德地图秘钥，必须在加载JSAPI load.js文件之前
window._AMapSecurityConfig = {
securityJsCode: gloableConfig.secretKey // 开发环境使用
}
</script>
// xxx写自己的key
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=xxx&plugin=AMap.Driving&plugin=AMap.CitySearch&AMap.Geolocation"></script>
</body>
</html>
== 注： static 文件夹下的config.js（用来绑定秘钥）==
var gloableConfig = {
"key": "21e6448a80093b98bbe496326979xxx", // 高德地图的key（配合秘钥使用的key）开发环境使用
"secretKey": "d41253368f29e52ce9eaed3d63xxx", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
};
3.3 点标记（用点标记当前位置）
通过菜单管理建立高德地图菜单，并新建Map.vue组件
<template>
<div>
<div id="container" style="width: 100%;height: calc(100vh - 100px)"></div>
</div>
</template>
<script>
export default {
name: "Map",
data(){
return {};
},
created(){},
mounted(){
// 创建地图实例
const map = new AMap.Map("container", {
zoom: 13, //地图级别
// 滕王阁经纬度
center: [115.88112000000001, 28.681510000000014],
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
// viewMode: "2D", //设置地图模式
});
//知识点1（点标记），创建一个 Marker 实例：
const marker = new AMap.Marker({
position: new AMap.LngLat(115.88112000000001, 28.681510000000014),
//position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "滕王阁",
});
//将创建的点标记添加到已有的地图实例：
map.add(marker);
},
}
</script>
效果图如下所示：
3.4 信息窗体（点击当前位置，弹出当前位置信息介绍）
<template>
<div>
<div id="container" style="width: 100%;height: calc(100vh - 100px)"></div>
</div>
</template>
<script>
export default {
name: "Map",
data(){
return {};
},
created(){},
mounted(){
// 创建地图实例
const map = new AMap.Map("container", {
zoom: 13, //地图级别
//115.938187,28.6839
center: [115.938187, 28.6839],
//center: [116.397428, 39.90923], //地图中心点 北京
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
// viewMode: "2D", //设置地图模式
});
//知识点1（点标记），创建一个 Marker 实例：
const marker = new AMap.Marker({
position: new AMap.LngLat(115.88112000000001, 28.681510000000014),
//position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "滕王阁",
});
// 知识点2，定义信息窗体
//信息窗体的内容
var content = [
"<div><b>滕王阁</b></b>",
"电话 : 0791-xxx 邮编 : 3300xxx",
"地址 : 江西省南昌市青山湖区xxxx</div>",
];
//创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({
content: content.join("<br>"), //传入字符串拼接的 DOM 元素
anchor: "top-left", // 显示位置
});
// 当点击地图某个点获取经纬度
var clickHandler = function(e) {
console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
//打开信息窗体
infoWindow.open(map, map.getCenter()); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
};
marker.on('click',clickHandler);
//将创建的点标记添加到已有的地图实例：
map.add(marker);
},
}
</script>
效果图如下：
3.5 路线规划（行车轨迹）
<template>
<div>
<div id="container" style="width: 100%;height: calc(100vh - 100px)"></div>
</div>
</template>
<script>
export default {
name: "Map",
data(){
return {};
},
created(){},
mounted(){
// 创建地图实例
const map = new AMap.Map("container", {
zoom: 13, //地图级别
//115.938187,28.6839
// center: [115.938187, 28.6839],
//center: [116.397428, 39.90923], //地图中心点 北京
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
// viewMode: "2D", //设置地图模式
});
// 3, 路径规划，需要密钥的配置
AMap.plugin("AMap.DragRoute", function () {
//path 是驾车导航的起、途径和终点，最多支持16个途经点
var path = [];
path.push([116.303843, 39.983412]);
path.push([116.321354, 39.896436]);
path.push([116.407012, 39.992093]);
var route = new AMap.DragRoute(map, path, 0);
//查询导航路径并开启拖拽导航
route.search();
});
},
}
</script>
效果图如下所示：
3.6 定位（定位所在城市位置）
<template>
<div>
<div id="container" style="width: 100%;height: calc(100vh - 100px)"></div>
</div>
</template>
<script>
export default {
name: "Map",
data(){
return {};
},
created(){},
mounted(){
// 创建地图实例
const map = new AMap.Map("container", {
zoom: 13, //地图级别
//115.938187,28.6839
// center: [115.938187, 28.6839],
//center: [116.397428, 39.90923], //地图中心点 北京
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
// viewMode: "2D", //设置地图模式
});
// 4，定位城市信息 需要引入好插件 （定位不准确）
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
//查询成功，result即为当前所在城市信息
map.setCity(result.city);
console.log('===>',result);
}
})
})
},
}
</script>
result的数据结构：
{
adcode: "360000"
bounds: {className: 'AMap.Bounds', southWest: t, northEast: t}
city: "南昌市"
info: "OK"
infocode: "10000"
province: "江西省"
rectangle: "115.6786001,28.48182853;116.1596596,28.86719757"
status: "1"
}
效果如下所示：
总结
在系统中简单的使用高德地图
写在最后
如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
文章会一直更新
