uniapp使用高德地图的超详细步骤

1、项目前准备

1.1、首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看

1.2、链接: 高德地图申请key直通车,点击前往

有一个uniapp项目。

2、页面创建引入

新建一个uniapp的空白页 使用web-view 渲染html文件页

<web-view src="/hybrid/html/adminr.html"></web-view>

新建一个html文件,头部hede里面引入文件

<!-- 地图 -->
 <script type="text/javascript">
 //这个地方的securityJsCode是自己的高德安全密钥,用自己的哈
 window._AMapSecurityConfig = securityJsCode: '蛋糕吃不完我打包带走,respect' }
 </script>
 <script src="https://webapi.amap.com/loader.js"></script>
 <!-- vue -->
 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script

然后在body 里面加一个div 就是我们地图的展示了

<body>
 <div id="app">
 <div id="container"></div>
 </div>
 </body>

3、地图实现js

这个地方除了key用自己的就可以直接复制

链接: 官网直通车

AMapLoader.load({
 "key": "蛋糕吃不完我打包带走,respect", // 申请好的Web端开发者Key ,一样用自己的
 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
 "plugins": ['AMap.Driving'], // 需要使用的的插件列表,如比例尺'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',{
 center: [118.045616, 24.366646], //经纬度地图一进来显的位置
 resizeEnable: true,
	 zoom: 13 //地图显示的缩放级别
	})
 });
 
}

完成以上步骤 我们就可以获取到一个完整的地图啦 Let me see see

然后我们要给刚刚设置经纬度添加一个标记 不然不知道是哪个位置

4、地图实现单点标记

接着在刚刚的 var map = new AMap.Map下面添加标记

var map = new AMap.Map('container',{
 center: [118.045616, 24.366646], //经纬度地图一进来显的位置
 resizeEnable: true,
	 zoom: 13 //地图显示的缩放级别
	}) 
 // 根据经纬度标记地理位置
 var marker = new AMap.Marker({
 position: new AMap.LngLat(118.045616, 24.366646), 
 title: '默认图标' //可以自定义icon图标展示
 })
 // 将创建的点标记添加到已有的地图实例
 map.add(marker)

5、地图实现终点与起点标记

// 构造路线导航类
 var driving = new AMap.Driving({
 map: map,
 }); 
 // 根据起终点经纬度规划驾车导航路线
 driving.search(
 new AMap.LngLat(118.099481, 24.583817),
 new AMap.LngLat(118.045616, 24.366646), 
 function(status, result) {
 if (status === 'complete') {
 console.log('绘制驾车路线完成')
 //new AMap.InfoWindow 自定义窗体
 } else {
 console.log('获取驾车数据失败:' + result)
 }
 });

最终实起点到终点路线

6、最后 上代码~

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 <title>Document</title>
 <!-- 地圖 -->
 <script type="text/javascript">
 window._AMapSecurityConfig = {
 securityJsCode: '868c41a6460a22634ecee3efc61abe07',
 }
 </script>
 <script src="https://webapi.amap.com/loader.js"></script>
 <!-- vus -->
 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
 

</head>
<body>
 <div id="app">
 <div id="container"></div>
 </div>
</body>

<script>
 new Vue({
 el: '#app',
 data() {
 return {}
 },
 mounted() {
 this.initr()
 },
 methods: {
 initr(){
 AMapLoader.load({
 "key": "11326b9fd9fdfa988cd15851bc55525a", // 申请好的Web端开发者Key,首次调用 load 时必填
 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
 "plugins": ['AMap.Driving'], // 需要使用的的插件列表,如比例尺'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',{
 center: [118.045616, 24.366646],
 resizeEnable: true,
	 zoom: 13 //地图显示的缩放级别
 });

 // // 根据经纬度标记地理位置
 // var marker = new AMap.Marker({
 // position: new AMap.LngLat(118.045616, 24.366646), 
 // title: '默认图标' //可以自定义icon图标展示
 // });

 // // 将创建的点标记添加到已有的地图实例
 // map.add(marker);

 // 构造路线导航类
 var driving = new AMap.Driving({
 map: map,
 }); 
 // 根据起终点经纬度规划驾车导航路线
 driving.search(new AMap.LngLat(118.099481, 24.583817), new AMap.LngLat(118.045616, 24.366646), 
 function(status, result) {
 if (status === 'complete') {
 console.log('绘制驾车路线完成') 
 // console.log(status,'status')
 } else {
 console.log('获取驾车数据失败:' + result)
 }
 });

 }).catch((e)=>{
 console.error(e); //加载错误提示
 }); 
 }
 },
 })
</script>

<style scoped>
*{
 margin: 0;
}
body,html,#container {
	width: 100vw;
	height: 100vh
}

#panel {
 position: fixed;
 background-color: white;
 max-height: 90%;
 overflow-y: auto;
 top: 10px;
 right: 10px;
 width: 280px;
}
#panel .amap-call {
 background-color: #009cf9;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 overflow: hidden;
}
 
</style>
</html>

总结

作者:DUCC不必原文地址:https://blog.csdn.net/qwe_aaaaa/article/details/125998982

%s 个评论

要回复文章请先登录注册