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

目录

• 1、项目前准备
• 2、页面创建引入
• 3、地图实现js
• 4、地图实现单点标记
• 5、地图实现终点与起点标记
• 6、最后 上代码~
• 总结

1、项目前准备

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

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

有一个uniapp项目。

2、页面创建引入

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

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

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

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、最后 上代码~

总结

到此这篇关于uniapp使用高德地图的文章就介绍到这了,更多相关uniapp使用高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！