uniapp 使用高德地图

1、项目前准备

1.1、首先你需要去申请一个属于自己的高德地图key，怎么申请暂不多说需要的去官网看
1.2、链接: 高德地图申请key直通车，点击前往。
有一个uniapp项目或者是demo。

2、页面创建和引入

2.1、在uniapp的项目中新建一个空白页，使用web-view标签来渲染HTML文件

<template>
	<view class="demo">
		<web-view src="/static/hybrid/html/map.html"></web-view>
	</view>
</template>

2.2 在pages目录的同级下新建一个目录存放HTML文件（我是放在了静态文件static中的因为放在其他位置会访问不到html文件）在uni-app中，默认情况下只能将HTML文件放置在static和src目录下。但是，你也可以通过自定义构建配置来修改这些约定，从而将HTML文件放置在其他目录中。要自定义目录来放置HTML文件，你可以使用uni-app的构建插件机制。通过配置构建插件，你可以在构建过程中自定义文件的生成和复制规则。

<!-- 地圖 -->
<script type="text/javascript">
      window._AMapSecurityConfig = {
          securityJsCode: '填写自己申请的安全密钥',
      }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

然后在body中添加一个div来展示地图

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

3、地图实现js

这个地方的key需要用自己的（下面申请地址）
链接: 高德官网直达

AMapLoader.load({
            key: "b26e9ccb4a39adcf15009f291e50ab9a", // 申请好的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) => {
            // JS API加载完成后获取AMap对象
            var map = new AMap.Map('container', {
                    center: [118.787326, 32.053766],
                    zoom: 13 //地图显示的缩放级别
            });
 })

完成以上步骤就可以获取到一个完整的地图了

4、地图标记

为了方便找到刚刚我们设置的经纬度可以给他添加一个标记

// 根据经纬度标记地理位置
var marker = new AMap.Marker({
    position: new AMap.LngLat(118.787326, 32.053766),  
    title: '默认图标' //可以自定义icon图标展示
})
// 将创建的点标记添加到已有的地图实例
map.add(marker)

通过以上代码可以在地图上标记刚刚的我们设置的经纬度

5、在地图中实现路线规划

var driving = new AMap.Driving({ 
    map: map
});
driving.search(new AMap.LngLat(118.787326, 32.053766), new AMap.LngLat(119.49869, 32.175316),
    function(status, result) {
        if (status === 'complete') {
            console.log('绘制驾车路线完成')
            // console.log(status,'status')
        } else {
            console.log('获取驾车数据失败：' + result)
        }
});

完整效果展示

6、总结

这次uniapp中使用地图也是因为项目需要，同时也是第二次在掘金发表文章希望以后发的越来越多，也希望你们看到后有一点收获吧，如果发现我的代码有问题也可以在评论区讨论，加油吧JYM！！！

高德地图在uniapp中的使用