The map component is used in the development of small programs, and sometimes it is necessary to round the corners of the map to beautify it. However, for the first time, you may encounter the problem that you cannot set the rounded corners. Let’s take a look at the correct setting method.
First on the renderings
First in wxml: the map component should be placed in the view box (the parameter settings in the map are not important)
<view class="ll">
<map class="map11" latitude="{
{jwg}}" longitude="{
{jwa}}" scale="6"
show-compass="true"show-scale="true"
polyline="{
{polyline}}" style="width: 700rpx; height: 800rpx; " markers="{
{markers}}" enable-scroll="true" enable-scroll="false" bindmarkertap="dj"></map>
</view>The settings in the map: latitude, longitude, longitude, scale zoom level, whether showcompass displays the compass, polyline is the drawn route polyline, style contains the basic map settings such as length, width and height, markers is the setting of marker points, and bindmarkertap is the marker point These are not important here, because this is intercepted from the actual project, just ignore it
inside wxss
Set up the view just now
.ll{
margin-left: 25rpx;
transform: translateY(0);
width: 700rpx;
height: 800rpx;
border-radius: 50rpx;
overflow:hidden;
box-shadow: 20rpx 15rpx 10rpx 10rpx #3b1902e1;
}The key code is overflow, and then it is completed. The main thing is to use the view box to limit the overflow of the map
You can add some other beautification settings such as boxshadow or something