上周刚接到一个需求,产品觉得高德的默认地图样式不好看,想要一个手绘地图贴合上去,看着美观很多,然而我内心确是抵触的,无法 ,产品讲了,只能先回答试试看看。接下拉就是一搏谷歌搜索。
1.使用web版本的高德地图,然后和native交互完成
web端有现成的方案,直接贴合自定义图片
var imageLayer = new AMap.ImageLayer({
url: 'gulangyu.png',
bounds: new AMap.Bounds(
[118.057708, 24.436293], //左下角
[118.077706, 24.454069] //右上角
),
zooms: [15, 18]
});
var map = new AMap.Map('container', {
resizeEnable: true,
center: [118.067042,24.444673],
zoom: 15,
layers: [
new AMap.TileLayer(),
imageLayer
]
});
复制代码
上面就可以直接贴合手绘地图,需要四角定位,然后直接把图片的图层贴合上去。