高德离线包我已经存至Gitee(自行下载即可):高德地图离线解决方案: 高德地图离线解决方案
然因为高德地图的瓦片地图太大,所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以
initMap () {
const base_url = "/"
const layers = [new AMap.TileLayer({
getTileUrl: function (x, y, z) {
// return `${base_url}imgMap/${z}/${x}/${y}.png`
return `http://192.168.0.105:29001/images/imgMap/${z}/${x}/${y}.png`
},
opacity: 1,
zIndex: 99,
})]
this.map = new AMap.Map('container', { // 设置地图容器id
resizeEnable: true,
zoom: 15,
zooms: [15, 20], //设置缩放级别范围 3-20 级
// 前面是缩小 后面是放大
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
center: [114.057201, 22.538136],
defaultCursor: 'pointer',
showLabel: true, //是否显示文字标注
layers: layers,
Plugins:["AMap.PolygonEditor"]
})
},
然后使用他的离线方法
ceju () {
this.ruler1 = new AMap.MouseTool(this.map)
this.ruler1.rule({
startMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
}),
offset: new AMap.Pixel(-9, -31)
},
endMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: new AMap.Pixel(-9, -31)
},
midMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: new AMap.Pixel(-9, -31)
},
lineOptions: {//可缺省
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 2
}
})
},
这个时候会报错 因为没有这个方法
解决方法
这个代码把你想用的方法名保存到本地
找到对应的名字 复制
然后就可以正常使用这个方法拉