有做过这个功能，之前用的是百度地图提供的api，完全符合你的需求。当然，高德地图貌似也有，你可以去看看。
百度地图api:>
找到两个前端就能解决的方法，最后因为各种原因采用了方法二。
方法一：
找到地图上的全部点，然后在canvas上面重绘一次。
html2canvas(this$refstarget, {
useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {
let cans = canvasgetContext("2d");
//批量地图重新打点 加载
documentquerySelectorAll("#mapView_layers image")forEach((item) => {
var obj = item;
var x = itemgetAttribute("x");
var y = itemgetAttribute("y");
var itemWidth = itemgetAttribute("width");
var itemHeight = itemgetAttribute("height");
consolelog("item", item, x, y);
if (width == 8) {
cansdrawImage(obj, x, y, itemWidth, itemHeight);
} else {
cansdrawImage(
obj,
x ,
y - 1 - itemHeight / 2 ,
itemWidth,
itemHeight
);
}
});
//下面是截图代码
})
登录后复制
因为本身目标dom的position定位问题，最后打的点可能会出现偏移。
所以还要给html2canvas加几个属性： x , y , scrollX , scrollY。保险起见，再加上两个参数 width 和 height 。
本人是后面chrome测着没问题，但是给小伙伴测试的时候，他用的360浏览器还有个xx浏览器有点问题。干脆参数全加上。
screenShot() {
let canvasBox = this$refstarget;
//获取目标div位置;
var tPosition = canvasBoxgetBoundingClientRect();
consolelog("size", tPosition);
// 获取父级的宽高
const width = parseInt(windowgetComputedStyle(canvasBox)width);
const height = parseInt(windowgetComputedStyle(canvasBox)height);
html2canvas(this$refstarget, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPositiony,
scrollX: -tPositionx,
useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {
})
}
登录后复制
要是项目的地图是不可移动的，基本到这里就可以了。
但是地图只要一挪动。。一个新的bug出现了。。。。。整个地图画线打点层的偏移量和截图之前不一样。。。。 截图后，画线层偏的比原地图还要远，打点却还在原位没动过。。
这个问题需要修正svg的偏移，然后这个标注点绘制的时候也要加上一个偏移量。
地图偏移的bug后面再讲。
方法二：（最后采用）
把svg中所有的<image>的href路径转换为base64编码格式。简单方便，不用考虑位置什么的问题，就是有些浏览器里面加载慢。。。setTimeout有时候要设置大一点。。
screenShot() {
let canvasBox = this$refstarget;
//获取目标div位置;
var tPosition = canvasBoxgetBoundingClientRect();
consolelog("size", tPosition);
// 获取父级的宽高
const width = parseInt(windowgetComputedStyle(canvasBox)width);
const height = parseInt(windowgetComputedStyle(canvasBox)height);
//---------------------
//解决svg 内部image加载不了的问题,把image改为base64,配合setTimeout html2canvas使用
documentquerySelectorAll("#mapView_layers image")forEach((item) => {
consolelog("item", item);
var img = itemgetAttribute("xlink:href");
consolelog("href", img);
var image = new Image();
imagecrossOrigin = "";
imagesrc = img;
imageonload = () => {
var base64 = getBase64Image(image);
itemsetAttribute("xlink:href", base64); //更改href属性
};
});
//地址转为base64编码
function getBase64Image(img) {
var canvas = documentcreateElement("canvas");
canvaswidth = imgwidth;
canvasheight = imgheight;
var ctx = canvasgetContext("2d");
ctxdrawImage(img, 0, 0, imgwidth, imgheight);
var ext = imgsrcsubstring(imgsrclastIndexOf("") + 1)toLowerCase();
var dataURL = canvastoDataURL("image/" + ext);
return dataURL;
}
setTimeout(() => {
html2canvas(this$refstarget, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPositiony,
scrollX: -tPositionx,
useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {
})
}, 200);
}
登录后复制
其实就在Dreamweaver就可以很好的处理
你就靠coords的值，注意看横向相同，有两个数字相同的，纵向相同也有两个数字是相同的，至于两个热点大小不一样的话，也可以根据加减来完成；
其它的都直接里面拖动搞定就行了
这个直接看百度地图的api啊···其实html就可以了···php只是用来记录坐标什么的有用·给你个例子吧·
<!DOCTYPE html><html>
<head>
<meta ;
这都是百度地图上的····自己去研究一下吧··
先用html布局，布局好你要d出的东西的位置，然后隐藏起来，在用js控制，点击时候，相应的数据显示，不点击就隐藏！，就行了！推荐企业地图制作平台——地图无忧
制作地图非常简单，效果展示多样
网点标注，区域划分，路线规划等功能非常实用
还可以切换底图
可以设置标签展示样式，很多小功能，非常实用
制作数据地图、客户地图都非常简单
我就经常用这个平台制作地图
以上就是关于html,css怎么做一个可以区域划分的地图全部的内容，包括:html,css怎么做一个可以区域划分的地图、HTML如何调用手机已安装的地图软件导航、gis多个图层地图用htmlcanvas截图获取不到等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）