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 =newAMap.Map('container',{center:[118.045616,24.366646],//经纬度地图一进来显的位置resizeEnable:true,zoom:13//地图显示的缩放级别})});}
完成以上步骤 我们就可以获取到一个完整的地图啦 Let me see see
然后我们要给刚刚设置经纬度添加一个标记 不然不知道是哪个位置
4、地图实现单点标记
接着在刚刚的 var map = new AMap.Map下面添加标记
var map =newAMap.Map('container',{center:[118.045616,24.366646],//经纬度地图一进来显的位置resizeEnable:true,zoom:13//地图显示的缩放级别})// 根据经纬度标记地理位置var marker =newAMap.Marker({position:newAMap.LngLat(118.045616,24.366646),title:'默认图标'//可以自定义icon图标展示})// 将创建的点标记添加到已有的地图实例
map.add(marker)
5、地图实现终点与起点标记
// 构造路线导航类var driving =newAMap.Driving({map: map,});// 根据起终点经纬度规划驾车导航路线
driving.search(newAMap.LngLat(118.099481,24.583817),newAMap.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>newVue({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 =newAMap.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 =newAMap.Driving({map: map,});// 根据起终点经纬度规划驾车导航路线
driving.search(newAMap.LngLat(118.099481,24.583817),newAMap.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>
本文转载自: https://blog.csdn.net/qwe_aaaaa/article/details/125998982
版权归原作者 DUCC不必 所有， 如有侵权，请联系我们删除。
版权归原作者 DUCC不必 所有， 如有侵权，请联系我们删除。