定制软件开发使用高德地图
1、定制软件开发项目前准备
1.1、定制软件开发首先你需要去申请一个定制软件开发属于自己的高德地图key，定制软件开发怎么申请暂不多说需要定制软件开发的去官网看
1.2、链接: 。
有一个uniapp项目。
2、页面创建引入
新建一个uniapp的空白页 使用 渲染html文件页
<web-view src="/hybrid/html/adminr.html"></web-view>- 1
新建一个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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
然后在body 里面加一个div 就是我们地图的展示了
<body> <div id="app"> <div id="container"></div> </div> </body>- 1
- 2
- 3
- 4
- 5
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 //地图显示的缩放级别 }) }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
完成以上步骤 我们就可以获取到一个完整的地图啦 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)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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) } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
最终实起点到终点路线
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端开发者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 = 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); // 构造路线导航类 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('绘制驾车路线完成') // 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117