uniapp使用高德地图的超详细步骤
更新时间：2022年12月08日 11:54:38 作者：DUCC不必
使用uni-app框架开发微信小程序,可以使用高德地图开发地图选点、搜索位置、定位、获取详细的地址信息、码值等信息,下面这篇文章主要给大家介绍了关于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>
总结
到此这篇关于uniapp使用高德地图的文章就介绍到这了,更多相关uniapp使用高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在移动端开发的时候，常常需要加点击态，就是当用户点击某个URL时，给相应的标签添加按下效果样式。这篇文章给大家分享了三种实现方法，包括伪类:active、webkit-tap-highlight-color和touch事件，下面来一起看看详细的介绍吧。2017-01-01
深入浅析JavaScript中的in关键字和for-in循环
这篇文章主要介绍了JavaScript中的in关键字和for-in循环，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length 在改变，改用for的话开始的length已经被固定，问题就解决啦2013-07-07
这篇文章主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本篇文章给大家介绍了JavaScript代码实现txt文件的上传预览功能，文字代码相结合的形式给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
这篇文章主要为大家详细介绍了js模态对话框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。2013-07-07
这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
最新评论