uniapp踩坑（三）：调用原生高德地图API，展示路线和marker，以及绘制行政区域边界，并用html2canvas截图分享到微信（一）
在vue中调用原生高德地图（html页面和js文件），展示路线和marker，以及行政区域边界
一、需求及问题
1、uniapp中其实已经封装好了map组件，基本的功能都可实现，但我这边需要一个暗黑色的地图，并且要展示行政区域边界信息，如下图所示，在uniapp官网找了一遍，没找到解决方案，于是我就看了原生高德地图api，发现可以实现修改地图的样式。高德官方地址：https://lbs.amap.com/api/javascript-api/summary
2、计划引入高德官方地图后，就需要把地图搞在一个html页面中，此时存在四个问题：
（1）vue页面如何引入html页面？
解决：在vue页面使用组件webview
（2)在html页面中如何引入高德地图？
解决：在高德官方注册账号并申请Key
（3)地图引入成功且绘制出路线和行政区域后，如何对浏览器页面进行截图？
解决：使用html2canvas
（4)如何对截取的图片进行分享（微信好友和朋友圈）？
解决：这里就需要使用到web-view 的页面和vue应用内的页面交互。参考：在 web-view 加载的 HTML 中调用 uni 的 API
二：结果展示
截图前手机展示的样式：
截图分享到微信好友后的图片：
三：具体实现过程
一、js引入高德地图
1、划重点了：一定要先注册账号并申请Key，里面步骤很详细，直接跟着步骤来。
二、vue页面
使用webview引入html页面，其中src地址为咱们自己写的html文件
<template>
<view class="shareImage">
<view style="">
<web-view id="mapContainer" src="/hybrid/html/allrouter.html" @message="message"></web-view>
</view>
</view>
</template>
三、html页面
（1)目录结构：一定要放在hybrid目录下：
(2)引入高德地图：在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
注意：这里踩坑之处，运行中可能会报"AMap is not undefined"，
解决方法：将地图api的js 与JQuery的 调换下位置就好了 。
（3)添加div标签作为地图容器，同时为该div指定id属性,并设置样式，然后加载map地图；
#container {
width: 100%;
height: 100%;
}
<div id="container" ></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
center:[117.000923,36.675807],//地图的中心坐标
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: "amap://styles/darkblue",//地图的主题颜色：暗黑色
zoom:11，//初始地图级别
});
</script>
上面只是一个简单的高德地图绘制过程，若要加载路线、marker、行政区域规划，还需要多看看高德官方的api,里面都有案例可参考。
核心代码如下：
绘制路线
// lineArrList后端返回的字段，包含走的路线的所有经纬度
lineArrList.map((item,index )=> {
// 进行画线
//lineArr是所有的经纬度集合
item.points.map(t =>{
lineArr.push([t[0],t[1]])
})
arr = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#df5000", //线颜色橘色：df5000蓝色：2faeea
strokeWeight: 3, //线宽
strokeStyle: "solid", //线样式
lineJoin: 'round' // 折线拐点连接处样式
})
map.add(arr);//把路线绘制到地图上
})
绘制行政区并给每个城市添加marker
本示例中后端返回的有多个城市和其对应的经纬度，所以我用for循环对每个城市添加了marker和行政区域边界绘制。
// /*################ 绘制行政区 ###############*/
AMap.plugin('AMap.DistrictSearch', function () {
// 创建行政区查询对象
var city = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
// 设置查询行政区级别为 市
level: 'city'
})
// cityList是当前自驾城市的列表，假设cityList[i][0]值为北京市
for(var i=0;i<cityList.length;i++){
city.search(cityList[i][0], function(status, result) {
// 获取当前自驾城市(级别为市级)的边界信息
var bounds = result.districtList[0].boundaries
var polygons = []
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.7,
fillColor: '#355050',
strokeColor: '#1c7294'
})
polygons.push(polygon)
}
// 地图自适应
// map.setFitView()
}
})
// // 添加marker
marker = new AMap.Marker({
position: [cityList[i][1],cityList[i][2]],
content: '
', //自定义点标记覆盖物内容
offset: new AMap.Pixel(-12, -30)
});
// 将 markers 添加到地图
map.add(marker);
}
})
注意：踩坑之处：添加marker图片时一直不起作用，只有占位符。
官方是这样写的，使用的是icon放图片的绝对路径或相对路径，我在项目中也这样写，但一直不显示图片。
// 构造点标记
var marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [116.405467, 39.907761]
});
解决方法：我放弃了icon，直接使用content，轻松解决该问题。
content: '', //自定义点标记覆盖物内容
到此就实现了调用原生高德地图，展示路线和marker以及行政区域边界的绘制功能。下一步我们就需要对该页面进行截图并分享。
接下一篇文章：uniapp踩坑（三）：调用高德地图绘制出路线后，用html2canvas截图并分享到微信（二）