快捷導(dǎo)航

uniapp使用高德地圖的超詳細(xì)步驟

更新時(shí)間：2022年12月08日 11:54:38 作者：DUCC不必

使用uni-app框架開(kāi)發(fā)微信小程序,可以使用高德地圖開(kāi)發(fā)地圖選點(diǎn)、搜索位置、定位、獲取詳細(xì)的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細(xì)步驟,需要的朋友可以參考下

1、項(xiàng)目前準(zhǔn)備

1.1、首先你需要去申請(qǐng)一個(gè)屬于自己的高德地圖key，怎么申請(qǐng)暫不多說(shuō)需要的去官網(wǎng)看

1.2、鏈接: 高德地圖申請(qǐng)key直通車(chē)，點(diǎn)擊前往。

有一個(gè)uniapp項(xiàng)目。

2、頁(yè)面創(chuàng)建引入

新建一個(gè)uniapp的空白頁(yè) 使用web-view 渲染html文件頁(yè)

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

新建一個(gè)html文件，頭部hede里面引入文件

  <!-- 地圖 -->
  <script type="text/javascript">
   //這個(gè)地方的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 里面加一個(gè)div 就是我們地圖的展示了

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

3、地圖實(shí)現(xiàn)js

這個(gè)地方除了key用自己的就可以直接復(fù)制

鏈接: 官網(wǎng)直通車(chē)

      AMapLoader.load({
            "key": "蛋糕吃不完我打包帶走,respect",  // 申請(qǐng)好的Web端開(kāi)發(fā)者Key ，一樣用自己的
            "version": "2.0",   // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 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)緯度地圖一進(jìn)來(lái)顯的位置
          resizeEnable: true,
		  zoom: 13 //地圖顯示的縮放級(jí)別
		})
     });
        
}

完成以上步驟我們就可以獲取到一個(gè)完整的地圖啦 Let me see see

然后我們要給剛剛設(shè)置經(jīng)緯度添加一個(gè)標(biāo)記不然不知道是哪個(gè)位置

4、地圖實(shí)現(xiàn)單點(diǎn)標(biāo)記

接著在剛剛的 var map = new AMap.Map下面添加標(biāo)記

        var map = new AMap.Map('container',{
          center: [118.045616, 24.366646], //經(jīng)緯度地圖一進(jìn)來(lái)顯的位置
          resizeEnable: true,
		  zoom: 13 //地圖顯示的縮放級(jí)別
		}) 
       // 根據(jù)經(jīng)緯度標(biāo)記地理位置
        var marker = new AMap.Marker({
           position: new AMap.LngLat(118.045616, 24.366646),  
           title: '默認(rèn)圖標(biāo)' //可以自定義icon圖標(biāo)展示
        })
        // 將創(chuàng)建的點(diǎn)標(biāo)記添加到已有的地圖實(shí)例
        map.add(marker)

5、地圖實(shí)現(xiàn)終點(diǎn)與起點(diǎn)標(biāo)記

               // 構(gòu)造路線導(dǎo)航類(lèi)
                var driving = new AMap.Driving({
                    map: map,
                }); 
                // 根據(jù)起終點(diǎn)經(jīng)緯度規(guī)劃駕車(chē)導(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('繪制駕車(chē)路線完成')
                     //new AMap.InfoWindow 自定義窗體
                    } else {
                      console.log('獲取駕車(chē)數(shù)據(jù)失敗：' + result)
                    }
               });

最終實(shí)起點(diǎn)到終點(diǎn)路線

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",  // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
            "version": "2.0",   // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 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ù)經(jīng)緯度標(biāo)記地理位置
                // var marker = new AMap.Marker({
                //     position: new AMap.LngLat(118.045616, 24.366646),  
                //     title: '默認(rèn)圖標(biāo)' //可以自定義icon圖標(biāo)展示
                // });

                // // 將創(chuàng)建的點(diǎn)標(biāo)記添加到已有的地圖實(shí)例
                // map.add(marker);

                // 構(gòu)造路線導(dǎo)航類(lèi)
                var driving = new AMap.Driving({
                    map: map,
                }); 
                // 根據(jù)起終點(diǎn)經(jīng)緯度規(guī)劃駕車(chē)導(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('繪制駕車(chē)路線完成') 
                      // console.log(status,'status')
                    } else {
                      console.log('獲取駕車(chē)數(shù)據(jù)失?。? + result)
                    }
                });

        }).catch((e)=>{
                console.error(e);  //加載錯(cuò)誤提示
        });  
      }
    },
  })
</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>