uniapp使用高德地圖的超詳細步驟
更新時間：2022年12月08日 11:54:38 作者：DUCC不必
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點、搜索位置、定位、獲取詳細的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細步驟,需要的朋友可以參考下
1、項目前準備
1.1、首先你需要去申請一個屬于自己的高德地圖key，怎么申請暫不多說需要的去官網(wǎng)看
1.2、鏈接: 高德地圖申請key直通車，點擊前往。
有一個uniapp項目。
2、頁面創(chuàng)建引入
新建一個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、地圖實現(xiàn)js
這個地方除了key用自己的就可以直接復(fù)制
鏈接: 官網(wǎng)直通車
AMapLoader.load({
"key": "蛋糕吃不完我打包帶走,respect", // 申請好的Web端開發(fā)者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], //經(jīng)緯度地圖一進來顯的位置
resizeEnable: true,
zoom: 13 //地圖顯示的縮放級別
})
});
}
完成以上步驟 我們就可以獲取到一個完整的地圖啦 Let me see see
然后我們要給剛剛設(shè)置經(jīng)緯度添加一個標記 不然不知道是哪個位置
4、地圖實現(xiàn)單點標記
接著在剛剛的 var map = new AMap.Map下面添加標記
var map = new AMap.Map('container',{
center: [118.045616, 24.366646], //經(jīng)緯度地圖一進來顯的位置
resizeEnable: true,
zoom: 13 //地圖顯示的縮放級別
})
// 根據(jù)經(jīng)緯度標記地理位置
var marker = new AMap.Marker({
position: new AMap.LngLat(118.045616, 24.366646),
title: '默認圖標' //可以自定義icon圖標展示
})
// 將創(chuàng)建的點標記添加到已有的地圖實例
map.add(marker)
5、地圖實現(xiàn)終點與起點標記
// 構(gòu)造路線導(dǎo)航類
var driving = new AMap.Driving({
map: map,
});
// 根據(jù)起終點經(jīng)緯度規(guī)劃駕車導(dǎo)航路線
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('獲取駕車數(shù)據(jù)失?。? + 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端開發(fā)者Key，首次調(diào)用 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 //地圖顯示的縮放級別
});
// // 根據(jù)經(jīng)緯度標記地理位置
// var marker = new AMap.Marker({
// position: new AMap.LngLat(118.045616, 24.366646),
// title: '默認圖標' //可以自定義icon圖標展示
// });
// // 將創(chuàng)建的點標記添加到已有的地圖實例
// map.add(marker);
// 構(gòu)造路線導(dǎo)航類
var driving = new AMap.Driving({
map: map,
});
// 根據(jù)起終點經(jīng)緯度規(guī)劃駕車導(dǎo)航路線
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('獲取駕車數(shù)據(jù)失?。? + 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>
總結(jié)
到此這篇關(guān)于uniapp使用高德地圖的文章就介紹到這了,更多相關(guān)uniapp使用高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript對象拷貝與Object.assign用法實例分析
這篇文章主要介紹了JavaScript對象拷貝與Object.assign用法,結(jié)合實例形式分析了javascript深拷貝與淺拷貝以及Object.assign的功能與相關(guān)使用技巧,需要的朋友可以參考下2018-06-06
前端很多項目中，都有文件下載的需求，特別是JS生成文件內(nèi)容，然后讓瀏覽器執(zhí)行下載操作（例如在線圖片編輯、在線代碼編輯、iPresst等2014-03-03
這篇文章主要介紹了微信小程序swiper實現(xiàn)文字縱向輪播提示效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
一文詳解JavaScript中的事件循環(huán)(event?loop)機制
JavaScript中的事件循環(huán)（Event?Loop）是一種重要的機制，用于管理異步代碼的執(zhí)行，它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行，同時允許異步操作如定時器、網(wǎng)絡(luò)請求和事件處理，本將給大家詳細的介紹一下JavaScript事件循環(huán)機制,感興趣的朋友可以參考下2023-12-12
div上加了onclick事件，里面又有超鏈a，點超鏈的時候能不觸發(fā)div 的事件嗎？2007-12-12
學(xué)習(xí)JavaScript設(shè)計模式之享元模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的享元模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01
js實現(xiàn)兼容PC端和移動端滑塊拖動選擇數(shù)字效果
這篇文章主要為大家詳細介紹了js實現(xiàn)兼容PC端和移動端滑塊拖動選擇數(shù)字的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
后來經(jīng)過自己的測試，發(fā)現(xiàn)將字符轉(zhuǎn)換為十六進制的方法不完善。2011-11-11
JS與Ajax Get和Post在使用上的區(qū)別實例詳解
這篇文章主要介紹了JS與Ajax Get和Post在使用上的區(qū)別實例詳解的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06