向导地图的创建、向导地图的使用在开发过程中，需要在向导地图上选择一个图标，在地图上使用该选择的图标进行POI的创建，并灵活地根据客户端的需要使用图标。
以上一个向导地图的效果为例，选择的效果(红色边框图像)使用canvas加载图片
html5的canvas技术可以添加一张图像，以图像的实际大小显示。 示例代码如下：
let _image=new Image (； //图像设置为跨域_ image.set attribute (' cross origin '，' Anonymous ' )； //设置图像的路径_ image.src='./image/sprite @ 2x.png '； _ image.onload=function ((/canvas中显示图像的let _ context=_ tmp canvas.get context ) ' 2d ' )； _context.drawimage(_image，0，0 )； (； 的图像作为背景显示，同时加载向导地图位置、纵横比信息的json文件。
覆盖canvas显示红框
在此，为了便于处理，将canvas直接覆盖在加载图像的canvas上，进行透明的处理。 根据鼠标在canvas上点击的位置信息，判断点击了向导地图中哪个图标的位置，从json文件中提取图标的位置、纵横信息，在canvas上加上红色边框达到引言红色边框的效果。
键码：
this.canvas context.clear rect (0，0，this.imageWdith，this.imageHeight )； this.canvas context.stroke style=' red '； this.canvasContext.beginPath (； this.canvas context.move to (style info.x，styleinfo.y )； this.canvas context.lineto (style info.xstyleinfo.width，styleinfo.y )； this.canvas context.lineto (style info.xstyleinfo.width，styleinfo.y styleinfo.height )； this.canvas context.lineto (style info.x，styleinfo.y styleinfo.height )； this.canvasContext.closePath (； this.canvasContext.stroke (；